1 / 20

Just Enough HTML

Just Enough HTML. How to Create Basic HTML Documents. The World Wide Web. The World Wide Web is a collection of millions of documents which reside on the internet and are written in HTML. What is HTML? . H yper T ext M arkup L anguage A Language for formatting web documents Features:

desirae-cardenas
Download Presentation

Just Enough HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Just Enough HTML How to Create Basic HTML Documents

  2. The World Wide Web • The World Wide Web is a collection of millions of documents which reside on the internet and are written in HTML

  3. What is HTML? • HyperText Markup Language • A Language for formatting web documents • Features: • Hypertext – links within pages that lead to other web pages on the internet • Universality – virtually any computer can read any web page (but not necessarily in the same way)

  4. Writing HTML • Can use any text editor or word processor • Can also use web page editing software such as FrontPage • Web Page editing software simply generates an HTML text document for you • Document formatting is specified using HTML Tags.

  5. Writing HTML • Tags are commands written between angle brackets < > • Many commands require opening and closing tags. Closing tags use the same command word preceded by a slash: • <B>Hello world!</B> This is my web page. • Many tags have attributes that add additional formatting to the text. • Many attributes can have values • <FONT COLOR=“red”>My Classes:</FONT>

  6. Starting Your Web Page <HTML> <HEAD> <TITLE>Appears in the title bar and is used by search engines</TITLE> </HEAD> <BODY> </BODY> </HTML>

  7. The Body of the Web Page • Text Tags • Font Size and Color • Headings • Paragraphs • Line breaks and Extra space • Background Color • Linking to other Pages • Adding images to your Web Page

  8. Text Tags Bold text: <B></B> Example: <B>Hello</B> It will show up on your page like: Hello Italics: <I></I> Example: <I>Hello</I> It will show up on your page like: Hello Underline text:<U></U> Example: <U>Hello</U> It will show up on your page like: Hello Center text: <CENTER></CENTER>

  9. Font Size and Color <FONT SIZE="x">text to change</FONT> "x" will be replaced by a number with a + or - sign in front of it Examples: <FONT SIZE=“+2”>Text to make bigger</FONT> It will show up on your page like: Text to make bigger <FONT SIZE=“-2”>Text to make smaller</FONT> It will show up on your page like: Text to make smaller

  10. Font Size and Color <FONT COLOR="color"> </COLOR> We replace “color” with a color name or hexadecimal color value Examples: <FONT COLOR=“red”>Hello</FONT> It will show up on your page like: Hello <FONT COLOR=“#FF0000”>Hello</FONT> It will show up on your page like: Hello For more colors and hexadecimal codes: http://www.pageresource.com/html/hexcodes.htm

  11. Font Size and Color You can also use size and color declarations inside the same tag: <FONT SIZE=“+2” COLOR=“red”>Hello</FONT> It will show up on your page like: Hello

  12. Headings Six levels of headers – lowest numbers are largest font. <H1>My favorite websites</H1> Headers can ALIGN center, right or left. <H2 ALIGN=center>Spring 2004</H2>

  13. Paragraphs New paragraph: <P> </P> (can also ALIGN right, left, or center) The paragraph tag does not require a closing tag since it will end whenever a new paragraph tag is encountered. Example: <P> This is Paragraph 1 <P> This is Paragraph 2 <P> This is Paragraph 1 </P> <P> This is Paragraph 2 </P> =

  14. Line breaks and extra space • The tag for a line break is <BR>.  • When you insert this tag in your document, the contents will go to the next line.  • The <BR> tag does not need a closing tag   Example: Hello<BR>Hello again! It will show up on your page like: Hello Hello again!

  15. Line breaks and extra space Space: &nbsp; Example: To place 3 additional spaces between “Hello” and “World!” Hello &nbsp;&nbsp;&nbsp;World!

  16. Some Body tags attributes • Background Color: <BODY BGCOLOR=“Blue”> • Using an image as background: <BODY BACKGROUND = “clouds.gif”> • To choose a default color for text, set the TEXT attribute in the BODY tag • <BODY TEXT=“black”>

  17. Images, links, etc. • Horizontal Rule (a dividing line): • <HR> • <HR SIZE=10> 10 specifies the height in pixels • Insert an image onto the page: • <IMG SRC=“me.jpg”> • Links to other Web pages: • <A HREF=“http://www.uwm.edu”>University of Wisconsin-Milwaukee</A>

  18. Images, links, etc. • Comments are text that wont show up on the page • Begin comment <!-- • End comment -->

  19. Saving and Viewing • Save file as index.html • View by opening your web browser, selecting File -> Open ->path to index.html • After the permissions have been set so that the page is viewable by anyone on the internet, view by opening browser and typing in your URL in the address text box. • http://www.uwm.edu/~yourloginname

  20. References http://www.w3.org/MarkUp/Guide/ http://www.pageresource.com/html/index2.htm

More Related