HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 2 Chapter Objectives Describe linking terms and definitions Create a home page and enhance a Web page using images Align and add bold, italics, and color to text Change the bullet type used in an unordered list Add a text link to a Web page in the same Web site

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 3 Chapter Objectives Add an link Use absolute and relative paths Save and view an HTML file and test the links Open an HTML file Add an image with wrapped text

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 4 Chapter Objectives Add a text link to a Web page on another Web site Add links to targets within a Web page Copy and paste HTML code Add an image link to a Web page in the same Web site

Plan Ahead Plan the Web site Analyze the need Choose the content for the Web page Determine how the pages will link to one another Establish what other links are necessary Create the Web page and links Test all Web pages within the Web site Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 5

6 Starting Notepad Click the Start button on the Windows Vista taskbar to display the Start menu Click All Programs at the bottom of the left pane on the Start menu to display the All Programs list Click Accessories in the All Programs list Click Notepad in the Accessories list to display the Notepad window If the Notepad window is not maximized, click the Maximize button on the Notepad title bar to maximize it Click Format on the menu bar If the Word Wrap command does not have a check mark next to it, click Word Wrap

Entering HTML Tags to Define the Web Page Structure Enter the HTML code shown on the following slide Press ENTER at the end of each line. If you make an error as you are typing, use the BACKSPACE key to delete all the characters back to and including the incorrect characters, then continue typing Compare what you typed to Figure 3–9 on page HTML 92. If you notice errors, use your mouse pointer or ARROW keys to move the insertion point to the right of each error and use the BACKSPACE key to correct the error Position the insertion point on the blank line between the and tags Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 7

Entering HTML Tags to Define the Web Page Structure Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 8

9 Adding an Image Click the blank line below the tag (line 12) and type and then press the ENTER key

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 10 Adding an Image

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 11 Adding a Left-Aligned Heading with a Font Color With the insertion point on line 13, type Welcome to the Valley's best pasta place! and then press the ENTER key

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 12 Adding a Left-Aligned Heading with a Font Color

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 13 Entering a Paragraph of Text With the insertion point on line 14 enter the HTML code shown in Table 3–4 on page HTML 95 as the first paragraph in the HTML file. Press ENTER at the end of each line Press the ENTER key again

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 14 Entering a Paragraph of Text

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 15 Creating Unordered (Bulleted) Lists If necessary, click line 21 Enter the HTML code shown in Table 3-5 on page HTML 96 After the in line 26, press the ENTER key twice to insert a blank line on line 27 and end on line 28

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 16 Creating Unordered (Bulleted) Lists

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 17 Adding Paragraphs of Text If necessary, click line 28 Enter the HTML code shown in Table 3–6 on page HTML 97 to insert the additional paragraphs of text. Press the ENTER key at the end of each line

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 18 Adding Paragraphs of Text

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 19 Adding a Text Link to Another Web Page within the Same Web Site Click immediately to the left of the m in the word monthly on line 29 Type to start the link, setting the Web page specials.html as the linked Web page Click immediately to the right of the s in specials and before the comma on line 29. Type to close the link

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 20 Adding a Text Link to Another Web Page within the Same Web Site

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 21 Adding an Link With the insertion point at the beginning of line 35, to the left of the p in pastadivine, type as the start of the link. This will link to the address when the link is clicked Click immediately after the m in isp.com and before the period in the address text on line 35 Type to end the link as shown on the following slide

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 22 Adding an Link

Adding a Subject Together with Body Message Text Type as the tag Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 23

Adding a Text Link to a Web Page in Another Web Site Click immediately to the left of the h in history on line 31 and type to add the text link that will connect to the external Web site when clicked Click immediately to the right of the a in pasta on line 31 and type to end the tag as shown on the following slide Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 24

Adding a Text Link to a Web Page in Another Web Site Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 25

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 26 Saving and Printing an HTML File With a USB flash drive connected to one of the computer’s USB ports, click File on the Notepad menu bar and then click Save As. Type pastadivine.html in the File name text box (do not press ENTER) If Computer is not displayed in the Favorite Links section, drag the top or bottom edge of the Save As dialog box until Computer is displayed. If necessary, collapse the Folders pane to see the Computer link Click Computer in the Favorite Links section to display a list of available drives If necessary, scroll until UDISK 2.0 (G:) is displayed in the list of available drives

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 27 Saving and Printing an HTML File If necessary, open the Chapter03\ChapterFiles folder Click the Save button in the Save As dialog box to save the file on the USB flash drive with the name pastadivine.html Click File on the menu bar, click Print on the File menu, and then click the Print button in the Print dialog box to print a hard copy of the pastadivine.html file

Saving and Printing an HTML File Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 28

Validating a Web Page Click the Start button on the Windows Vista taskbar to display the Start menu Click the Internet icon in the pinned items list on the Start menu to start Internet Explorer. If necessary, click the Maximize button to maximize the browser window Click the Address bar to select the URL in the Address bar Type validator.w3.org to replace the current entry then press the ENTER key. Click the Validate by File Upload tab Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 29

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 30 Validating a Web Page Click the Browse button Locate the pastadivine.html file on your storage device and click the file name Click the Open button in the Choose file dialog box and the file name will be inserted into the File box Click the Check button. The resulting validation should be displayed as shown on the following slide

Validating a Web Page Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 31

Viewing a Web Page In Internet Explorer, click the Address bar to select the URL in the Address bar Type g:\Chapter03\ChapterFiles\pastadivin e.html to display the new URL in the Address bar and then press the ENTER key Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 32

Viewing a Web Page Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 33

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 34 Testing Links in a Web Page With the Pasta Divine home page displayed in the browser, point to the link, and then click the link to open the default program with the address in the To: text box as shown in Figure 3– 24 on page HTML 108 Click the Close button in the New Message window. If a dialog box asks if you want to save changes, click No Click the history of pasta link to test the external link in the Web page. Close the browser window or use the Back button to return to the Pasta Divine home page With the USB flash drive in drive G, point to the monthly specials link and click the link. The secondary Web page, specials.html, is displayed, although it is not completed

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 35 Testing Links in a Web Page

Printing a Web Page Close the browser window or click the Back button on the Standard toolbar to return to the Pasta Divine home page Click the Print icon on the Command bar Once the Pasta Divine home page is printed, click the monthly specials link to return to that Web page Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 36

Printing a Web Page Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 37

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 38 Opening an HTML File Click the pastadivine Notepad button on the taskbar With a USB flash drive connected to one of the computer’s USB ports, click File on the menu bar and then click Open If Computer is not displayed in the Favorite Links section, drag the top or bottom edge of the Open dialog box until Computer is displayed Click Computer in the Favorite Links section to display a list of available drives

Opening an HTML File If necessary, scroll until UDISK 2.0 (G:) is displayed in the list of available drives If necessary, navigate to the USB drive (G:). Click the Chapter03 folder, and then click the ChapterFiles folder in the list of available folders If necessary, click the file type box arrow, and then click All Files. Click specials.html in the list of files Click the Open button in the Open dialog box to display the HTML code for the specials.html Web page as shown on the following slide Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 39

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 40 Opening an HTML File

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 41 Formatting Text in Bold Click immediately to the left of the F in Fettuccine on line 34. Type as the start tag Click immediately to the right of the o in Alfredo on line 34, and then type as the end tag to end the logical bold formatting style Repeat the first step to bold the other two occurrences of section headers for the words Lasagna and Ravioli on lines 65 and 92 to surround the words with a logical bold style

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 42 Formatting Text in Bold

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 43 Adding an Image with Wrapped Text Highlight the line as shown in Figure 3–36 on page HTML 120 Type and do not press the ENTER key. This HTML code inserts an image named fettuccine.jpg that is left-aligned on the Web page, with text wrapped to its right and with five pixels of space around the image horizontally Highlight the line on line 66

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 44 Adding an Image with Wrapped Text Type (do not press ENTER) to insert a right-aligned image with wrapped text Highlight the line on line 93 Type (do not press ENTER) to insert a left-aligned image with wrapped text

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 45 Adding an Image with Wrapped Text

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 46 Clearing the Text Wrapping Highlight the line on line 60, and then type as the tag Highlight the line on line 87, and then type as the tag Highlight the line on line 118, and then type as the tag to clear the text wrapping for both left- and right- aligned images as displayed on the following slide

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 47 Clearing the Text Wrapping

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 48 Setting Link Targets Highlight the line on line 33 Type to create a link target named fettuccine Highlight the line on line 64 Type to create a link target named lasagna Highlight the line Type to create a link target named ravioli

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 49 Setting Link Targets

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 50 Adding Links to Link Targets within a Web Page Highlight the line Type Fettuccine Alfredo to create a link target named fettuccine Highlight the line Type Lasagna to create a link target named lasagna Highlight the line Type Ravioli to create a link target named ravioli

Adding Links to Link Targets within a Web Page Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 51

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 52 Adding Links to a Target at the Top of the Page Highlight the line on line 12 Type as the tag that will create a target at the top of the Web page named top Highlight the line to position the insertion point on the line 62 Type To top as the tag

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 53 Adding Links to a Target at the Top of the Page

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 54 Copying and Pasting HTML Code Highlight the HTML code To top on line 62 Click Edit on the menu bar and then click Copy Highlight the line on line 89 to position the pointer Click Edit on the menu bar and then click Paste to paste the HTML code that you copied above Highlight the line on line 120. Repeat the previous step to paste the HTML code on line 120

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 55 Copying and Pasting HTML Code

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 56 Adding an Image Link to a Web Page Highlight the line on line 14 Type as the tag to start a link that will use the image pdlogosm.gif to link back to the home page as shown in Figure 3–48 on page HTML 128 Click immediately to the right of the > in the attribute alt=“Back to home page” /> on line 15

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 57 Adding an Image Link to a Web Page Type as the tag to end the link as shown in Figure 3-49 on page HTML 129 Click immediately to the right of the second “ in alt=“Back to home page” /> to position the insertion point Press the SPACEBAR, then type border=”0” as the attribute to create a borderless link as shown on the following slide

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 58 Adding an Image Link to a Web Page

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 59 Saving and Printing the HTML File Click File on the menu bar, and then Save on the File menu to save the HTML file as specials.html Click File on the menu bar, click Print on the File menu, and then click the Print button in the Print dialog box to print the HTML code

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 60 Saving and Printing the HTML File

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 61 Validating, Viewing, and Testing a Web Page Open a new browser window and go to validator.w3.org Click the Validate by File Upload tab, browse to the specials.html Web page, and then click Open Click the Check button to determine if the Web page is valid. If the file is not valid, make corrections and revalidate Click the Pasta Divine Monthly Specials button on the taskbar to view the page in your browser Click the Refresh button on the Standard toolbar to display the changes made to the Web page, which should now look like Figure 3–27 on page HTML 111

Printing a Web Page Click the Print button on the Command bar Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 62

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 63 Quitting Notepad and a Browser Click the Close button on all open browser windows Click the Close button on the Notepad window

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 64 Chapter Summary Describe linking terms and definitions Create a home page and enhance a Web page using images Align and add bold, italics, and color to text Change the bullet type used in an unordered list Add a text link to a Web page in the same Web site

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 65 Chapter Summary Add an link Use absolute and relative paths Save and view an HTML file and test the links Open an HTML file Add an image with wrapped text

Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 66 Chapter Summary Add a text link to a Web page on another Web site Add links to targets within a Web page Copy and paste HTML code Add an image link to a Web page in the same Web site

HTML Concepts and Techniques Fifth Edition Chapter 3 Complete Creating Web Pages with Links, Images, and Formatted Text