Entering HTML Tags and Text

Entering HTML Tags and Text • Four tags define the overall structure of standard Web pages: • <HTML> and </HTML> • Indicates file is an HTML document • <HEAD> and </HEAD> • Introduction to the rest of the file • Indicates the area where the title will be placed • <TITLE> and </TITLE> • Indicates the title that will display in the title bar • <BODY> and </BODY> • Indicates the boundaries of the Web page

insertion point Entering Initial HTML Tags

all Web page content will be placed here all Web page content will be placed here ending BODY and HTML tags ending BODY and HTML tags Entering Initial HTML Tags If you notice an error in the text, use the BACKSPACE key to erase all the characters back to and including the one that is incorrect

Headings • Used to separate text and introduce new topics • Vary in size, from <H1> through <H6> • Use the same sized heading for the same level of topic

main heading main heading Entering Headings Since the Chiaravalle Pizza heading is the first line after the BODY tag, it will be the first thing displayed on the Web page

Paragraphs • Most text on Web pages is in paragraph format • The <P> tag has an optional ending tag • When a browser finds a <P> tag, it starts a new line and adds a paragraph break • Try not to type large sections of text without having paragraph breaks

paragraph tag and text Entering Paragraphs The <BR> (break) tag breaks a line of text and starts a new line, but does not add vertical spacing like a <P> tag

Creating a List • Lists structure your text in outline format • Unordered (bulleted) lists • <UL> and </UL> marks the beginning and end of unordered lists • Ordered (numbered) lists • <OL> and </OL> marks the beginning and end of ordered lists • The <LI> and </LI> tags define list items • The TYPE attribute defines the default bullet or number type

Unordered Lists <H3>Unordered Lists</H3> <UL TYPE=“disc”> <LI>First item – type disc</LI> <LI>Second item – type disc</LI> </UL> <UL TYPE=“square”> <LI>First item – type square</LI> <LI>Second item – type square</LI> <UL> <UL TYPE=“circle”> <LI>First item – type circle</LI> <LI>Second item – type circle</LI> </UL>

Ordered Lists <H3>Ordered Lists</H3> <OL TYPE=“1”> <LI>First item – type 1</LI> <LI>Second item – type 1</LI> </OL> <OL TYPE=“A”> <LI>First item – type A</LI> <LI>Second item – type A</LI> </OL> <OL TYPE=“a”> <LI>First item – type a</LI> <LI>Second item – type a</LI> </OL> <OL TYPE=“I”> <LI>First item – type I</LI> <LI>Second item – type I</LI> </OL> <OL TYPE=“i”> <LI>First item – type i</LI> <LI>Second item – type i</LI> </OL>

bulleted list tags and text Creating a Bulleted List

Saving the HTML File • You must save the file before you can view it in your browser • HTML files must end with an extension of .htm or .html • .html extensions only work on Web servers running an operating system that supports long filenames

Go to the File Menu and Select “Sava As” Saving the HTML File

File name text box Saving the HTML File

Using a Browser to View a Web Page • After you save your HTML file, you may view your Web page in a browser • The HTML file displays in your browser just as it would on the Web • Windows allows you to view the page in your browser while keeping Notepad open

Starting Your Browser

maximizebutton Internet Explorer Window menu bar standardbuttonstoolbar address bar default startup page status bar Your Browser

Click the Address bar Opening a Web Page in Your Browser

Type a:\page1.htmin the Address text box,then press ENTER Opening a Web Page in Your Browser

title main heading H2 heading paragraph body ofWeb page bulleted list Your Web Page

Entering HTML Tags and Text