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 def...
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 3
Chapter Objectives
• Add an e-mail link
• Use absol...
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 4
Chapter Objectives
• Add a text link to a Web page ...
General Project Guidelines - Plan Ahead
• Plan the Web site
• Analyze the need
• Choose the content for the Web page
• Det...
Using Links on a Web Page
• Many different Web page elements, including text, images
and animations can serve as links.
• ...
Link Color Attributes for <body> tag
Attribute Function
link • Normal link
• Controls the color of a normal unvisited link...
Types of Linking
1. Linking to Another Web Page within the Same Web Site
<a href=“URL”>linktext</a>
<a href=“specials.html...
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 9
Starting Notepad
• Click the Start button on the Wi...
Entering HTML Tags to Define
the Web Page Structure
• Enter the HTML code shown on the following slide
• Press ENTER at th...
Entering HTML Tags to Define
the Web Page Structure
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 11
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 12
Adding an Image
• Click the blank line below the <...
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 13
Adding an Image
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 14
Adding a Left-Aligned Heading
with a Font Color
• ...
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 15
Adding a Left-Aligned Heading
with a Font Color
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 16
Entering a Paragraph of Text
• With the insertion ...
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 17
Entering a Paragraph of Text
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 18
Creating Unordered (Bulleted) Lists
• If necessary...
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 19
Creating Unordered (Bulleted) Lists
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 20
Adding Paragraphs of Text
• If necessary, click li...
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 21
Adding Paragraphs of Text
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 22
Adding a Text Link to Another Web Page
within the ...
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 23
Adding a Text Link to Another Web Page
within the ...
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 24
Adding an E-Mail Link
• With the insertion point a...
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 25
Adding an E-Mail Link
Adding a Subject Together with Body
Message Text
• Type
<a href=mailto: pastadivine@isp.com?
subject=Monthly Specials&body...
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 ty...
Adding a Text Link to a Web Page in
Another Web Site
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text ...
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 29
Saving and Printing an HTML File
• With a USB flas...
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 30
Saving and Printing an HTML File
• If necessary, o...
Saving and Printing an HTML File
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 31
Validating a Web Page
• Click the Start button on the Windows Vista taskbar
to display the Start menu
• Click the Internet...
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 33
Validating a Web Page
• Click the Browse button
• ...
Validating a Web Page
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 34
Viewing a Web Page
• In Internet Explorer, click the Address bar to
select the URL in the Address bar
• Type
g:Chapter03Ch...
Viewing a Web Page
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 36
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 37
Testing Links in a Web Page
• With the Pasta Divin...
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 38
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 Div...
Printing a Web Page
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 40
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 41
Opening an HTML File
• Click the pastadivine Notep...
Opening an HTML File
• If necessary, scroll until UDISK 2.0 (G:) is displayed
in the list of available drives
• If necessa...
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 43
Opening an HTML File
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 44
Formatting Text
HTML Tags Function
<b> </b> Displa...
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 45
Formatting Text in Bold
• Click immediately to the...
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 46
Formatting Text in Bold
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 47
Adding an Image with Wrapped Text
• Highlight the ...
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 48
Adding an Image with Wrapped Text
• Type <p><img s...
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 49
Adding an Image with Wrapped Text
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 50
Clearing the Text Wrapping
• Highlight the line <!...
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 51
Clearing the Text Wrapping
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 52
Setting Link Targets
• Highlight the line <!--Line...
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 53
Setting Link Targets
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 54
Adding Links to Link Targets
within a Web Page
• H...
Adding Links to Link Targets
within a Web Page
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 55
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 56
Adding Links to a Target
at the Top of the Page
• ...
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 57
Adding Links to a Target
at the Top of the Page
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 58
Copying and Pasting HTML Code
• Highlight the HTML...
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 59
Copying and Pasting HTML Code
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 60
Adding an Image Link to a Web Page
• Highlight the...
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 61
Adding an Image Link to a Web Page
• Type </a> as ...
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 62
Adding an Image Link to a Web Page
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 63
Saving and Printing the HTML File
• Click File on ...
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 64
Saving and Printing the HTML File
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 65
Validating, Viewing, and Testing a Web
Page
• Open...
Printing a Web Page
• Click the Print button on the Command bar
Chapter 3: Creating Web Pages with Links, Images, and Form...
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 67
Quitting Notepad and a Browser
• Click the Close b...
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 68
Chapter Summary
• Describe linking terms and defin...
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 69
Chapter Summary
• Add an e-mail link
• Use absolut...
Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 70
Chapter Summary
• Add a text link to a Web page on...
HTML
Concepts and Techniques
Fifth Edition
Chapter 3 Complete
Creating Web Pages
with Links, Images,
and Formatted Text
Upcoming SlideShare
Loading in...5
×

Ddpz2613 topic3 linking

116

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
116
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Ddpz2613 topic3 linking"

  1. 1. HTML Concepts and Techniques Fifth Edition Chapter 3 Creating Web Pages with Links, Images, and Formatted Text
  2. 2. 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
  3. 3. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 3 Chapter Objectives • Add an e-mail 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
  4. 4. 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
  5. 5. General Project Guidelines - 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. 6. Using Links on a Web Page • Many different Web page elements, including text, images and animations can serve as links. • Text and images are the elements most widely used as links. • When text identifies a link, it often appears as underlined text, in a color different from the main Web page text. • Link Color Variation – Normal link that is blue and underlined – Visited link that is purple and underlined – When mouse pointer hovers over a text link, it turns into a pointing hand. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 6
  7. 7. Link Color Attributes for <body> tag Attribute Function link • Normal link • Controls the color of a normal unvisited link • Default color usually is blue vlink • Visited link • Controls the color of a link that has been clicked • Default color usually is green or purple alink • Active link • Controls the color of a link immediately after the mouse clicks the hyperlink • Default color usually is green or red Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 7
  8. 8. Types of Linking 1. Linking to Another Web Page within the Same Web Site <a href=“URL”>linktext</a> <a href=“specials.html”>monthly special </a> 2. Linking to a Web Page in Another Web Site <a href=“http://en.wikipedia.cor/wiki/Pasta”> 3. Linking within a Web Page 4. Linking to an E-mail Address <a href=“mailto:address@email.com”>linktext</a> Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 8
  9. 9. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 9 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
  10. 10. 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 <body> and </body> tags Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 10
  11. 11. Entering HTML Tags to Define the Web Page Structure Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 11
  12. 12. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 12 Adding an Image • Click the blank line below the <body> tag (line 12) and type <img src=“pdlogo.gif” width=”711” height=”155” alt=”Pasta Divine logo”/> and then press the ENTER key
  13. 13. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 13 Adding an Image
  14. 14. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 14 Adding a Left-Aligned Heading with a Font Color • With the insertion point on line 13, type <h1><font color=”#ff0000”>Welcome to the Valley's best pasta place! </font></h1> and then press the ENTER key
  15. 15. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 15 Adding a Left-Aligned Heading with a Font Color
  16. 16. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 16 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
  17. 17. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 17 Entering a Paragraph of Text
  18. 18. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 18 Creating Unordered (Bulleted) Lists • If necessary, click line 21 • Enter the HTML code shown in Table 3-5 on page HTML 96 • After the </ul> in line 26, press the ENTER key twice to insert a blank line on line 27 and end on line 28
  19. 19. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 19 Creating Unordered (Bulleted) Lists
  20. 20. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 20 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
  21. 21. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 21 Adding Paragraphs of Text
  22. 22. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 22 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 <a href=”specials.html”> 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 </a> to close the link
  23. 23. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 23 Adding a Text Link to Another Web Page within the Same Web Site
  24. 24. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 24 Adding an E-Mail Link • With the insertion point at the beginning of line 35, to the left of the p in pastadivine, type <a href=”mailto: pastadivine@isp.com”> as the start of the e-mail link. This will link to the e- mail address pastadivine@isp.com when the link is clicked • Click immediately after the m in isp.com and before the period in the e-mail address text on line 35 • Type </a> to end the e-mail link as shown on the following slide
  25. 25. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 25 Adding an E-Mail Link
  26. 26. Adding a Subject Together with Body Message Text • Type <a href=mailto: pastadivine@isp.com? subject=Monthly Specials&body=What are the specials?> as the tag Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 26
  27. 27. 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 <a href=”http:// en.wikipedia.org/wiki/Pasta”> 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 </a> to end the tag as shown on the following slide Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 27
  28. 28. Adding a Text Link to a Web Page in Another Web Site Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 28
  29. 29. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 29 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
  30. 30. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 30 Saving and Printing an HTML File • If necessary, open the Chapter03ChapterFiles 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
  31. 31. Saving and Printing an HTML File Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 31
  32. 32. 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 32
  33. 33. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 33 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
  34. 34. Validating a Web Page Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 34
  35. 35. Viewing a Web Page • In Internet Explorer, click the Address bar to select the URL in the Address bar • Type g:Chapter03ChapterFilespastadivin 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 35
  36. 36. Viewing a Web Page Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 36
  37. 37. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 37 Testing Links in a Web Page • With the Pasta Divine home page displayed in the browser, point to the e-mail link, pastadivine@isp.com and then click the link to open the default e-mail program with the address pastadivine@isp.com 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
  38. 38. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 38 Testing Links in a Web Page
  39. 39. 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 39
  40. 40. Printing a Web Page Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 40
  41. 41. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 41 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
  42. 42. 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 42
  43. 43. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 43 Opening an HTML File
  44. 44. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 44 Formatting Text HTML Tags Function <b> </b> Display text as bold <big> </big> Increase the font size <blockquote> Designates a long quotation <em></em> Display text with emphasis or italicized <i> </i> Display text as italicized <pre> </pre> Sets enclosed text as preformatted material <small> </small> Decrease the font size <strong></strong> Displays text with strong emphasis <sub> </sub> Displays text as subscript <sup> </sup> Displays text as superscript <tt> </tt> Displays text as teletype or monospace text <u> </u> Displays text as underlined
  45. 45. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 45 Formatting Text in Bold • Click immediately to the left of the F in Fettuccine on line 34. Type <strong> as the start tag • Click immediately to the right of the o in Alfredo on line 34, and then type </strong> 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
  46. 46. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 46 Formatting Text in Bold
  47. 47. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 47 Adding an Image with Wrapped Text • Highlight the line <!--Line 35 – Insert Fettuccine image here --> as shown in Figure 3–36 on page HTML 120 • Type <p><img src=”fettuccine. jpg” width=”212” height=”203” alt=”Fettuccine” align=”left” hspace=”5” /></p> 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 <!--Line 66 – Insert Lasagna image here --> on line 66
  48. 48. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 48 Adding an Image with Wrapped Text • Type <p><img src=”lasagna.jpg” width=”308” height=”205” alt=”Lasagna” align=”right” hspace=”5” /> </p> (do not press ENTER) to insert a right-aligned image with wrapped text • Highlight the line <!--Line 93 – Insert Ravioli image here --> on line 93 • Type <p><img src=”ravioli.jpg” width=”200” height=”260” alt=”Ravioli” align=”left” hspace=”5” /></p> (do not press ENTER) to insert a left-aligned image with wrapped text
  49. 49. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 49 Adding an Image with Wrapped Text
  50. 50. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 50 Clearing the Text Wrapping • Highlight the line <!--Line 60 – Insert Clear left here --> on line 60, and then type <br clear=”left” /> as the tag • Highlight the line <!--Line 87 – Insert Clear right here --> on line 87, and then type <br clear=”right” /> as the tag • Highlight the line <!--Line 118 – Insert Clear left here --> on line 118, and then type <br clear=”left” /> as the tag to clear the text wrapping for both left- and right- aligned images as displayed on the following slide
  51. 51. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 51 Clearing the Text Wrapping
  52. 52. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 52 Setting Link Targets • Highlight the line <!--Line 33 – Insert Fettuccine target here --> on line 33 • Type <a name=”fettuccine”></a> to create a link target named fettuccine • Highlight the line <!--Line 64 – Insert Lasagna target here --> on line 64 • Type <a name=”lasagna”></a> to create a link target named lasagna • Highlight the line <!--Line 91 – Insert Ravioli target here --> • Type <a name=”ravioli”></a> to create a link target named ravioli
  53. 53. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 53 Setting Link Targets
  54. 54. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 54 Adding Links to Link Targets within a Web Page • Highlight the line <!--Line 28 – Add first bullet here --> • Type <li><a href=”#fettuccine”>Fettuccine Alfredo</a></li> to create a link target named fettuccine • Highlight the line <!--Line 29 – Add second bullet here --> • Type <li><a href=”#lasagna”>Lasagna</a></li> to create a link target named lasagna • Highlight the line <!--Line 30 – Add third bullet here --> • Type <li><a href=”#ravioli”>Ravioli</a></li> to create a link target named ravioli
  55. 55. Adding Links to Link Targets within a Web Page Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 55
  56. 56. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 56 Adding Links to a Target at the Top of the Page • Highlight the line <!--Line 12 – Insert Top target here --> on line 12 • Type <a name=”top”></a> as the tag that will create a target at the top of the Web page named top • Highlight the line <!--Line 62 – Insert first To Top link here --> to position the insertion point on the line 62 • Type <p><a href=”#top”><font size=”- 1”>To top</font></a></p> as the tag
  57. 57. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 57 Adding Links to a Target at the Top of the Page
  58. 58. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 58 Copying and Pasting HTML Code • Highlight the HTML code <p><a href=“#top”><font size=”-1”>To top</font></a></p> on line 62 • Click Edit on the menu bar and then click Copy • Highlight the line <!--Line 89 – Insert second To Top link here --> 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 <!--Line 120 – Insert third To Top link here --> on line 120. Repeat the previous step to paste the HTML code on line 120
  59. 59. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 59 Copying and Pasting HTML Code
  60. 60. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 60 Adding an Image Link to a Web Page • Highlight the line <!--Line 14 – Insert link back to home page here --> on line 14 • Type <a href=”pastadivine.html”> 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
  61. 61. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 61 Adding an Image Link to a Web Page • Type </a> 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
  62. 62. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 62 Adding an Image Link to a Web Page
  63. 63. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 63 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
  64. 64. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 64 Saving and Printing the HTML File
  65. 65. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 65 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
  66. 66. Printing a Web Page • Click the Print button on the Command bar Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 66
  67. 67. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 67 Quitting Notepad and a Browser • Click the Close button on all open browser windows • Click the Close button on the Notepad window
  68. 68. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 68 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
  69. 69. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 69 Chapter Summary • Add an e-mail 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
  70. 70. Chapter 3: Creating Web Pages with Links, Images, and Formatted Text 70 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
  71. 71. HTML Concepts and Techniques Fifth Edition Chapter 3 Complete Creating Web Pages with Links, Images, and Formatted Text
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×