1 / 53

Chapter THREE

Chapter THREE. Creating Web Pages with Links, Images, and Formatted Text. 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

swann
Download Presentation

Chapter THREE

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter THREE Creating Web Pages with Links, Images, and Formatted Text

  2. 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 background image

  3. Objectives • Add a text link to a Web page in the same Web site • Add an e-mail link • View the HTML file and test the links • Open an HTML file • Add an image with wrapped text

  4. 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. Entering HTML Tags to Define the Web Page Structure

  6. Adding an Image • Type <img src="plantworldlg.jpg“ width="720“ height="84“ alt="Plant World logo" /> and then press the ENTER key

  7. Adding an Image

  8. Adding a Left-Aligned Heading with a Font Color • With the insertion point on line 11, type <h1><font color="#000066">Welcome to Plant World!</font></h1> and then press the ENTER key

  9. Adding a Left-Aligned Heading with a Font Color

  10. Additional Information on Font Colors • There are two ways to color text on the Web. • Body tag - Sets the colors for the entire document • Font tag - Sets and changes colors as you move through the document • <body text=?> - Sets the font color • <body link=?> - Sets the color of links • <body vlink=?> - Sets the color of followed links • <body alink=?> - Sets the color of links on click • <font color=?> - Changes font color • </font> - Returns font to default color • Using the body tag, you can set the stage for your entire document, specifying the colors for regular text, links (normally blue), and followed links (usually red). Information from http://www.geocities.com/SiliconValley/6658/fontcolo.html

  11. More About Font Color • To change link colors: • Type <body text=#9932cd link=#ff0000 vlink=#00ff00 alink=#000000> • You’ll get a nearly illegible, but correctly colored page, with green text and red links that turn black on click, and violet after they've been followed. • What if you only want to color a single word? • Type <font color=#00ff00>green</font> with envy. • You'll get: green with envy. • You could even change the color of individual letters, if you really wanted to: • Type <font color=#ff0000>T</font> <font color=#ff7f00>E</font> <font color=#ffff00>C</font> <font color=#00ff00>H</font> • You’ll get TECH

  12. Font Color Review • TEXTChanges the color of the text on the page. This is an overall change and can only be done once on a page. • LINKChanges the color of the links you have on your page BEFORE a guest on your page "clicks" on them to visit. • ALINKChanges the color of an Active Link, or how a link looks when it is being clicked. • VLINKChanges the color of a Visited Link, or how a link looks to the guest if they have already been to that site. Note: Make sure you don't leave the link colors unreadable on your colored background. If you are changing the background color or using a background image, make sure that your visitors can see your links and your text.

  13. Common Color Values • The values for some commonly used colors: • White "FFFFFF" • Black "000000" • Purple "FF00FF" • Yellow "FFFF00" • Gray "C0C0C0" • Yellow "FFFF66" • Red "FF0000" • Blue "0000FF" • Green "00FF00" • Lt. Purple "CC33FF" • Lt. Blue "00CCFF"

  14. Color Names (if supported by browser) • Also, the newer versions of MSIE and Netscape support the use of some color names rather than the RGB values. The supported color names are: • BLACK • WHITE • GREEN • MAROON • OLIVE • NAVY • PURPLE • GRAY • RED • YELLOW • BLUE • TEAL • LIME • AQUA • FUSCHIA • SILVER

  15. Entering a Paragraph of Text • With the insertion point on line 12, type <p>For the finest in indoor and outdoor plants, come to Plant World! Plant World is the premier nursery for all of your planting needs. Our professional landscape design artists can visit your home and make recommendations for plants to use in your home or your yard.</p> as the first paragraph in the HTML file • Press the ENTER key twice

  16. Entering a Paragraph of Text

  17. Creating Unordered (Bulleted) Lists • If necessary, click line 16 • Enter the HTML code shown in Table 3-3 on page HTM 84 • Press the ENTER key twice to insert a blank line on line 29, after the second </ul> in the HTML code

  18. Creating Unordered (Bulleted) Lists

  19. Adding a Background Image • Click immediately to the right of the y in the <body> tag on line 9 and then press the SPACEBAR • Type background=“greyback.jpg” as the attribute

  20. Adding a Background Image

  21. Adding a Text Link to Another Web Page within the Same Web Site • Click immediately to the right of the </ul> tag on line 28 and then press the DOWN ARROW key twice • With the insertion point on line 30, type <p>To learn more about the Plant World products and services, please browse the Plant World Web site, where you can find information on all types of plants, both for indoor and outdoor use. You also can learn about this month's featured desert plants, which have a natural beauty that can enhance any landscape!</p> and then press the ENTER key • Click immediately to the left of the d in desert on line 32 • Type <a href="desertplants.htm"> to start the link • Click immediately to the right of the s in plants on line 33. Type </a> to end the link and then press the ENTER key

  22. Adding a Text Link to Another Web Page within the Same Web Site

  23. Adding an E-Mail Link • With the insertion point on line 34, type <p>Have a question or comment? Call us at (206) 555-PLANT or e-mail us at plantworld@isp.com. </p> as a new paragraph of text • Click immediately before the p in plantworld on line 34. Type <a href="mailto: plantworld@isp.com"> to start the e-mail link • Click immediately after the m in com in the e-mail address text. Type </a> to end the e-mail link

  24. Adding an E-Mail Link

  25. Viewing a Web Page

  26. Opening an HTML File

  27. Formatting Text in Bold • Click immediately to the left of the B in Botanical on line 32. Type <b> as the start tag • Click immediately to the right of the colon (:) in Botanical name: on line 32 and then type </b> as the end tag • Repeat the first two steps to bold the other three occurrences of the phrase, Botanical name:, on lines 45, 57, and 69

  28. Formatting Text in Bold

  29. Formatting Text in Italics • Click immediately to the right of the </b> on line 32. Type <em> as the start tag • Click immediately to the right of the at the end of Agavaceae on line 32. Type </em> as the end tag • Repeat the first two steps to italicize the other botanical names on lines 45, 57, and 69

  30. Formatting Text in Italics

  31. Formatting Text with a Font Color • Click immediately to the left of the word, DESERT, on line 11. Type <font color="#000099"> as the start tag • Click immediately to the right of the word, PLANTS, on line 11. Type </font> as the end tag

  32. Formatting Text with a Font Color

  33. Adding an Image with Wrapped Text • Highlight the words <!--Insert Agave image here --> on line 31 • Type <img src="agave.jpg“ align="right" alt="Agave" width="212“ height="203" /> and do not press the ENTER key • Highlight the words <!--Insert Desert Spoon image here --> on line 44 • Type <img src="desertspoon.jpg" align="left" alt="Desert Spoon“ width="245" height="198" /> to insert a left-aligned image with wrapped text

  34. Adding an Image with Wrapped Text • Highlight the words <!--Insert Golden Barrel image here --> on line 56 • Type <img src="goldenbarrel.jpg" align="right" alt= "Golden Barrel“ width="292" height="197" /> to insert a right-aligned image with wrapped text • Highlight the words <!– Insert Prickly Pear image here --> on line 68 • Type <img src= "pricklypear.jpg“ align="left“ alt= "Prickly Pear" width="250“ height="255" /> to insert a left-aligned image with wrapped text

  35. Adding an Image with Wrapped Text

  36. Clearing the Text Wrapping • Highlight the words <!--Insert right break clear here --> on line 41 and then type <br clear="right" /> as the tag • Highlight the words <!--Insert right break clear here --> on line 65 and then type <br clear="right" /> as the tag • Highlight the words • <!--Insert left break clear here --> on line 53 and then type <br clear="left" /> as the tag • Highlight the words <!--Insert left break clear here --> on line 77 and then type <br clear="left" /> as the tag

  37. Clearing the Text Wrapping

  38. Adding a Text Link to a Web Page in Another Web Site • Click immediately to the left of Arizona on line 80 and type <a href="http://www.desertmuseum.org"> to add the text link • Click immediately to the right of Museum on line 81 and type </a> to end the tag

  39. Adding a Text Link to a Web Page in Another Web Site

  40. Setting Link Targets • Click immediately to the left of the <font> tag on line 30 • Type <a name="agaveamericana"></a> to create a link target named agaveamericana • Click immediately to the left of the <font> tag on line 43 • Type <a name="desertspoon"></a> to create a link target named desertspoon

  41. Setting Link Targets • Click immediately to the left of the <font> tag on line 55 • Type <a name="goldenbarrel"></a> to create a link target named goldenbarrel • Click immediately to the left of the <font> tag on line 67 • Type <a name="pricklypear"></a> to create a link target named pricklypear

  42. Setting Link Targets

  43. Adding Links to Link Targets within a Web Page • Highlight the words <!--Start unordered list here --> on line 28 • Type <ul type="square"> and then press the ENTER key • Type <li><a href="#agaveamericana"> Agave Americana </a></li> and then press the ENTER key • Type <li><a href="#desertspoon"> Desert Spoon</a></li> and then press the ENTER key

  44. Adding Links to Link Targets within a Web Page • Type <li><a href= "#goldenbarrel">Golden Barrel</a></li> and then press the ENTER key • Type <li><a href="#pricklypear"> Prickly Pear</a></li> and then press the ENTER key • Type </ul> and then press the ENTER key

  45. Adding Links to Link Targets within a Web Page

  46. Adding Links to a Target at the Top of the Page • Click to the left of the < symbol on line 10 and then press the ENTER key • Position the insertion point on line 10 and type <a name="top"></a> as the tag • Position the insertion point on the blank line 48 and then type <p><a href="#top"><font size=-1>To top</font> </a></p> as the tag • Press the ENTER key

  47. Adding Links to a Target at the Top of the Page

  48. Copying and Pasting HTML Code • Highlight the HTML code, <p><a href="#top"><font size= -1> To top </font> </a></p>, on line 48 • Click Edit on the menu bar and then click Copy • Position the insertion point on line 61

  49. Copying and Pasting HTML Code • Click Edit on the menu bar and then click Paste • Press the ENTER key • Repeat the second step on the previous slide to paste the HTML code on lines 74 and 88

  50. Copying and Pasting HTML Code

More Related