57
HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

Embed Size (px)

Citation preview

Page 1: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

HTMLComprehensive Concepts and Techniques

Third Edition

Project 3

Creating Web Pages with Links, Images, and Formatted Text

Page 2: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

2HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

Project 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

Page 3: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

3HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

Project 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

Page 4: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

4HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

Project 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

Page 5: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

5HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

Starting Notepad

• Click the Start button on the taskbar and then point to All Programs on the Start menu

• Point to Accessories on the All Programs submenu and then click Notepad on the Accessories submenu

• 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 Word Wrap is not checked, click Word Wrap

Page 6: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

6HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

Entering HTML Tags to Define the Web Page Structure

Page 7: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

7HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

Adding an Image

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

Page 8: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

8HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

Adding an Image

Page 9: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

9HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

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

Page 10: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

10HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

Adding a Left-Aligned Heading with a Font Color

Page 11: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

11HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

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

Page 12: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

12HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

Entering a Paragraph of Text

Page 13: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

13HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

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

Page 14: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

14HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

Creating Unordered (Bulleted) Lists

Page 15: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

15HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

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

Page 16: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

16HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

Adding a Background Image

Page 17: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

17HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

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

Page 18: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

18HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

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

Page 19: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

19HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

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 [email protected]. </p> as a new paragraph of text

• Click immediately before the p in plantworld on line 34. Type <a href="mailto: [email protected]"> 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

Page 20: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

20HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

Adding an E-Mail Link

Page 21: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

21HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

Saving and Printing an HTML File

• With a floppy disk in drive A, click File on the menu bar and then click Save As. Type plantworld.htm in the File name text box

• If necessary, click 31⁄2 Floppy (A:) in the Save in list. Click the Project03 folder and then click the ProjectFiles folder in the list of available folders. Click the Save button in the Save As dialog box

• Click File on the menu bar and then click Print on the File menu

Page 22: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

22HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

Viewing a Web Page

• Click the Start button on the Windows taskbar and then point to All Programs on the Start menu. Click Internet Explorer (or another browser command) on the All Programs submenu

• If necessary, click the Maximize button to maximize the browser window.

• When the browser window appears, click the Address bar

• Type a:\Project03\ProjectFiles\plantworld.htm in the Address text box

• Press the ENTER key

Page 23: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

23HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

Viewing a Web Page

Page 24: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

24HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

Testing Links in a Web Page

• Point to the e-mail link, [email protected]

• Click [email protected]

• Click the Close button in the New Message window

• With the HTML Data Disk in drive A, point to the link, desert plants

• Click desert plants

Page 25: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

25HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

Opening an HTML File

• Click the Notepad button on the taskbar• With the HTML Data Disk in drive A, click File on the

menu bar and then click Open on the File menu• If necessary, click the Look in box arrow and then

click 31⁄2 Floppy (A:). Click the Project03 folder and then click the Project Files folder in the list of available folders

• If necessary, click the Files of type box arrow and then click All Files. Click desertplants.htm in the list of files

• Click the Open button in the Open dialog box

Page 26: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

26HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

Opening an HTML File

Page 27: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

27HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

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

Page 28: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

28HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

Formatting Text in Bold

Page 29: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

29HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

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

Page 30: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

30HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

Formatting Text in Italics

Page 31: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

31HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

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

Page 32: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

32HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

Formatting Text with a Font Color

Page 33: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

33HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

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

Page 34: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

34HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

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

Page 35: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

35HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

Adding an Image with Wrapped Text

Page 36: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

36HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

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

Page 37: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

37HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

Clearing the Text Wrapping

Page 38: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

38HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

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

Page 39: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

39HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

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

Page 40: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

40HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

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

Page 41: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

41HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

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

Page 42: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

42HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

Setting Link Targets

Page 43: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

43HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

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

Page 44: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

44HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

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

Page 45: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

45HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

Adding Links to Link Targets within a Web Page

Page 46: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

46HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

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

Page 47: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

47HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

Adding Links to a Target at the Top of the Page

Page 48: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

48HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

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

Page 49: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

49HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

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

Page 50: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

50HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

Copying and Pasting HTML Code

Page 51: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

51HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

Adding an Image Link to a Web Page• Click immediately to the left of <img on line

11

• Type <a href="plantworld.htm"> as the tag and then press the ENTER key

• Click immediately to the right of alt=“ “/> on line 12

Page 52: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

52HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

Adding an Image Link to a Web Page• Type </a> as the tag

• Click immediately to the left of alt=“ “/> on line 12

• Type border=“0” and then press the SPACEBAR

Page 53: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

53HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

Adding an Image Link to a Web Page

Page 54: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

54HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

Project 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 background image

Page 55: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

55HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

Project Summary

• 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

Page 56: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

56HTML Project 3: Creating Web Pages with Links, Images, and Formatted Text

Project 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

Page 57: HTML Comprehensive Concepts and Techniques Third Edition Project 3 Creating Web Pages with Links, Images, and Formatted Text

HTMLComprehensive Concepts and Techniques

Third Edition

Project 3 Complete