Creating and Linking Web Pages Copyright 2006 South-Western/Thomson Learning
advertisement
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. Screen 2 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. Screen 3 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. Screen 4 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. Screen 5 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. Screen 6 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. Screen 7 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. Screen 8 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. Screen 9 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. Screen 10 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. Screen 11 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. Screen 12 Review 1. HTML code a. Allows Web browsers to display Web pages b. Must be written in uppercase c. 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. Screen 13 Review 1. HTML code Allows Web browsers to display Web pages Click the mouse or tap the RIGHT ARROW key to continue. Screen 14 Review 2. Which pair of tags should be used to begin and end a Web page? a. <BODY> </BODY> b. <TITLE> </TITLE> c. <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. Screen 15 Review 2. Which pair of tags should be used to begin and end a Web page? <HTML> </HTML> Click the mouse or tap the RIGHT ARROW key to continue. Screen 16 Review 3. Which pair of tags should be used to begin and end a bulleted list? a. <LI> </LI> b. <UL> </UL> c. <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. Screen 17 Review 3. Which pair of tags should be used to begin and end a bulleted list? <UL> </UL> Click the mouse or tap the RIGHT ARROW key to continue. Screen 18 Review 4. An anchor tag in HTML creates a a. New paragraph b. Bulleted list c. 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. Screen 19 Review 4. An anchor tag in HTML creates a Hyperlink Click the mouse or tap the RIGHT ARROW key to continue. Screen 20 Review 5. In <BODY BGCOLOR=WHITE>, BGCOLOR is the a. Tag b. Attribute c. 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. Screen 21 Review 5. In <BODY BGCOLOR=WHITE>, BGCOLOR is the Attribute Click the mouse or tap the RIGHT ARROW key to continue. Screen 22
