13. All HTML Documents Have the Same Structure <HTML> T The first 6 tags are always the same in basic HTML document. Also known as HTML Headings . <TITLE> Online Resume </TITLE> </HEAD> D> <HEAD> </HTML> </HTML> IINTRODUCTION TO HTML <TITLE>
17. Creating Heading Tags HTML has 6 levels of heading which arrange from biggest to smallest size <H1> My Resume </H1> <H2> My Resume </H2> <H3> My Resume </H3> <H4> My Resume </H4> <H5> My Resume </H5> <H6> My Resume </H6>
20. HTML Line Breaks Use the <br /> tag if you want a line break (a new line) without starting a new paragraph: The <br /> element is an empty HTML element. It has no end tag. <br> or <br />
21. Saving a new HTML Document 1. Pull down the File menu and select s ave As 2. You will now see the Save As dialog box 3. Once you’ve determined the location for the file, you will need to give the file name. There are some rules to follow when naming HTML files: No spaces, and special characters a (é,%,#....) No very long name Generally, keep the file names all lower case. All file names must end with the extension of .htm or html
22. After Saving the Document, you should see the name of the document at the top of your WordPad window In this case, the file is called index. You will not see the extension of .html and that is to be expected.
23. Previewing a Local HTML Document Go to the local folder and double clic on the index.htm file This will open the index.htm in your default internet bowser ( Netscape or MS internet explorer )
25. Background Colors <HTML> <HEAD> <TITLE>Backgrounds</TITLE> </HEAD> <BODY BGCOLOR="#0000FF"> This page has a blue background. <P> </BODY> </HTML>
31. Character Formatting <CENTER>Centering</CENTER> <HTML> <HEAD> <TITLE>The Moroccan NODC, Rabat</TITLE> </HEAD> <BODY> <CENTER> <H1>Welcome to The Moroccan National Oceanographic Data Center – Odinafrica - Rabat </H1> </CENTER> </BODY> </HTML> INTRODUCTION TO HTML
32. Character Formatting <B> Bold </B> & <I> Italics </I> <BR> - The Break Tag <HTML> <HEAD> <TITLE>The Moroccan NODC, Rabat</TITLE> </HEAD> <BODY> <CENTER> <H1>Welcome to The Moroccan National Oceanographic Data Center – Odinafrica - Rabat </H1> </CENTER> </BODY> </HTML> <H3>Contact Information</H3> <B>CNDIO Maroc</B><BR> PO Box 1014-Avenue Ibn Batouta, Rabat Maroc <BR> Téléphone : (212). 37. 67. 59. 09 <BR> Fax : (212). 37 67 59 09 <BR> INTRODUCTION TO HTML
33.
34.
35.
36.
37. Character Formatting <CENTER>Centering</CENTER> <HTML> <HEAD> <TITLE>The Moroccan NODC, Rabat</TITLE> </HEAD> <BODY> <CENTER> <H1>Welcome to The Moroccan National Oceanographic Data Center – Odinafrica - Rabat </H1> </CENTER> </BODY> </HTML>
38. Attribute Example Purpose size="number" size="2" Defines the font size size="+number" size="+1" Increases the font size size="-number" size="-1" Decreases the font size face="face-name" face="Times" Defines the font-name color="color-value" color="#eeff00" Defines the font color color="color-name" color="red" Defines the font color
40. HTML Rules (Lines) The <hr /> tag is used to create an horizontal rule (line). Example <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p>
47. Destination – a hypertext document contains links that you can select, usually by clicking a mouse, to instantly view another topic or document. Creating Anchors <A> - tag creates an anchor, text that is specially marked so you can link to it from other points in the document. <A Name = “EMP”>Employment</A> <Name = “PHOTO”>IMG SRC=“Taylor.gif></A>
48. <A HREF = “EMP”> EMPLOYMENT</A> Link tags – tags that create links HREF – Hypertext REFerence - refer to an anchor that you place in the document. “ #anchor_name” refers to that anchor with a pound (#)symbol.
![INTRODUCING THE WORLD WIDE WEB ,[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)