Chapter 17 Creating and Linking Web Pages Copyright 2006 South-Western/Thomson Learning
advertisement
Chapter 17 Creating and Linking Web Pages Copyright 2006 South-Western/Thomson Learning History of WWW • World Wide Web was invented in 1989 • Inventor was Tim Berners-Lee • Release of Netscape browser in 1994 brought increased use of the Web Lesson 121 Slide 2 Web Site • A collection of related Web pages connected using hyperlinks • Hyperlinks can be text or graphics • When clicked, hyperlinks take a user to a new location – On the same Web page – On another page at the same Web site – On a different Web site Lesson 121 Slide 3 HTML • Stands for HyperText Markup Language • Web browsers use HTML to interpret and display Web pages Choose View, Source to view the HTML code for a Web page Lesson 121 Slide 4 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> Lesson 121 Slide 5 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 Lesson 121 Slide 6 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 Lesson 121 Slide 7 Displaying File Extensions • To display file extensions – – – – Choose Start, Control Panel Select Appearances and Themes, Folder Options Click the View tab Remove the check by Hide extensions for known file types Lesson 121 Slide 8 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> </BR> begins a new line – <TITLE> </TITLE> places a title in the title bar of the Web browser Lesson 122 Slide 9 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> Lesson 122 Slide 10 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> Lesson 122 Slide 11 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 Lesson 122 Slide 12 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 Lesson 122 Slide 13 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 Lesson 123 Attribute Value Slide 14 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"> Lesson 123 Slide 15 Using Application Programs • Web pages can be created using programs such as – Word – Excel – PowerPoint • The Save As Web Page command saves documents in a format that can be read by a browser Lesson 124 Slide 16 Save As Web Page • To save a Word document as a Web page – – – – Create the document Choose File, Save As Web Page Select a folder and enter a filename Change the page title if needed – Click Save Lesson 124 Slide 17 Slide Show for the Web • PowerPoint slide shows can be saved as Web pages • In the browser window – An outline appears at the left of the window – The first slide appears – Buttons are provided for navigating and playing the show Click to play the show Lesson 124 Slide 18 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> Lesson 125 Slide 19 Web Creation Programs • Several programs for creating Web sites are available – Macromedia Dreamweaver – Adobe GoLive – Microsoft FrontPage FrontPage is a popular Web page creation program Lesson 125 Slide 20
