Creating and Linking Web Pages Copyright 2006 South-Western/Thomson Learning
HTML Tags Make up the code that Web browsers understand Normally work in pairs, but some work alone Can be written in UPPERCASE or lowercase Are written in angle brackets < > Open HTML tags start commands <Center> Close HTML tags stop commands </Center> Click the mouse or tap the RIGHT ARROW key to continue.
Basic HTML Tags These tags provide the basic structure of a Web page <HTML> </HTML> begins and ends a Web page <HEAD> </HEAD> creates a header for a Web page <TITLE> </TITLE> displays a title in the title bar of the browser <BODY> </BODY> causes words and pictures to display in the main viewing area of the browser Click the mouse or tap the RIGHT ARROW key to continue.
File Extension A three- or four-letter code that identifies a file type Separated from the filename by a period PowerPoint files use .ppt extension Word files use .doc extension Exact and complete filenames and extensions must be used in HTML documents Click the mouse or tap the RIGHT ARROW key to continue.
Basic Formatting Tags Formatting tags help organize and add interest to Web pages <P> </P> leaves one blank line and begins a new paragraph <BR> begins a new line <TITLE> </TITLE> places a title in the title bar of the Web browser <TITLE> tags display title Click the mouse or tap the RIGHT ARROW key to continue.
Headings and Nested Tags Heading tags create a bold heading in a font larger than the body text Nested tags are organized in pairs moving from the outside in <CENTER> <H2> Mission Log <H2> <CENTER> Click the mouse or tap the RIGHT ARROW key to continue.
Bulleted List Tags Tags that create bulleted lists must be nested correctly <UL> <LI>Launched rocket on December 7, 1972.</LI> <LI>Landed on the moon on December 11, 1972.</LI> <LI>Splashdown took place on December 19, 1972.</LI> </UL> Click the mouse or tap the RIGHT ARROW key to continue.
Sample Web Page This Web page has headings and a bulleted list <H2> tags create heading <CENTER> tags center text heading <HR> tag creates a line <B> tag creates bold text <UL> and <LI> tags create a bulleted list Click the mouse or tap the RIGHT ARROW key to continue.
<A HREF="http://www.nasa.gov">Link to NASA</A> Adding Hyperlinks Hyperlinks are created with an anchor tag A hypertext reference is placed between quotation marks <A HREF="http://www.nasa.gov">Link to NASA</A> Hyperlink created with anchor tag Click the mouse or tap the RIGHT ARROW key to continue.
<BODY BGCOLOR=WHITE> Adding Color The background color of a Web page can be set with HTML tags An attribute is added to the tag A value is given for the attribute <BODY BGCOLOR=WHITE> Tag Attribute Value Click the mouse or tap the RIGHT ARROW key to continue.
Graphics Graphics should be in a format that allows small file sizes for quick loading GIF JPEG Place graphics in the correct folder Display graphics with the <IMG> tag Indicate width and height attributes <IMG SRC="images/title.gif" WIDTH="627" HEIGHT="148"> Click the mouse or tap the RIGHT ARROW key to continue.
Linking Pages An index page can be used to link Web pages List each page name on the index page Create a link from each page name to that page <P><B>Web Site Index </B></P> <A HREF="webpage7.html">Mission Overview</A><BR> <A HREF="webpage8.html">Photo Gallery</A><BR> <A HREF="webpage9.mht">Astronaut Bio, Cernan</A><BR> <A HREF="webpage10.mht">Astronaut Bio, Evans</A><BR> <A HREF="webpage11.mht"> Astronaut Bio, Schmitt </A><BR> <A HREF="webpage12.mht">Apollo 17 Slide Show</A><BR> Click the mouse or tap the RIGHT ARROW key to continue.
Review HTML code Allows Web browsers to display Web pages Must be written in uppercase Does not include tags that work in pairs Read the question and decide which answer you think is correct. Click the mouse to see the correct answer. Click the mouse or tap the RIGHT ARROW key to continue.
Review Answer HTML code Allows Web browsers to display Web pages Click the mouse or tap the RIGHT ARROW key to continue.
Review Which pair of tags should be used to begin and end a Web page? <BODY> </BODY> <TITLE> </TITLE> <HTML> </HTML> Read the question and decide which answer you think is correct. Click the mouse to see the correct answer. Click the mouse or tap the RIGHT ARROW key to continue.
Review Which pair of tags should be used to begin and end a Web page? <HTML> </HTML> Answer Click the mouse or tap the RIGHT ARROW key to continue.
Review Which pair of tags should be used to begin and end a bulleted list? <LI> </LI> <UL> </UL> <CENTER> </CENTER> Read the question and decide which answer you think is correct. Click the mouse to see the correct answer. Click the mouse or tap the RIGHT ARROW key to continue.
Review Which pair of tags should be used to begin and end a bulleted list? <UL> </UL> Answer Click the mouse or tap the RIGHT ARROW key to continue.
Review An anchor tag in HTML creates a New paragraph Bulleted list Hyperlink Read the question and decide which answer you think is correct. Click the mouse to see the correct answer. Click the mouse or tap the RIGHT ARROW key to continue.
Review Answer An anchor tag in HTML creates a Hyperlink Click the mouse or tap the RIGHT ARROW key to continue.
Review In <BODY BGCOLOR=WHITE>, BGCOLOR is the Tag Attribute Value Read the question and decide which answer you think is correct. Click the mouse to see the correct answer. Click the mouse or tap the RIGHT ARROW key to continue.
Review Answer In <BODY BGCOLOR=WHITE>, BGCOLOR is the Attribute Click the mouse or tap the RIGHT ARROW key to continue.