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

2.  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 2

3.  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 3

4.  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 4

5. 5

6.  Type and then press the ENTER key 6

7. 7

8.  With the insertion point on line 11, type Welcome to Plant World! and then press the ENTER key 8

9. 9

10.  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  - Sets the font color  - Sets the color of links  - Sets the color of followed links  - Sets the color of links on click  - Changes font color  - 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). 10 Information from http://www.geocities.com/SiliconValley/6658/fontcolo.html

11.  To change link colors: ◦ Type ◦ 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 green with envy. ◦ You'll get: green with envy.  You could even change the color of individual letters, if you really wanted to: ◦ Type T E C H ◦ You’ll get T E C H 11

12.  TEXT Changes the color of the text on the page. This is an overall change and can only be done once on a page.  LINK Changes the color of the links you have on your page BEFORE a guest on your page "clicks" on them to visit.  ALINK Changes the color of an Active Link, or how a link looks when it is being clicked.  VLINK Changes 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. 12

13.  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" 13

14.  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 14

15.  With the insertion point on line 12, type 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. as the first paragraph in the HTML file  Press the ENTER key twice 15

16. 16

17.  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 in the HTML code 17

18. 18

19.  Click immediately to the right of the y in the tag on line 9 and then press the SPACEBAR  Type background=“greyback.jpg” as the attribute 19

20. 20

21.  Click immediately to the right of the tag on line 28 and then press the DOWN ARROW key twice  With the insertion point on line 30, type 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! and then press the ENTER key  Click immediately to the left of the d in desert on line 32  Type to start the link  Click immediately to the right of the s in plants on line 33. Type to end the link and then press the ENTER key 21

22. 22

23.  With the insertion point on line 34, type Have a question or comment? Call us at (206) 555-PLANT or e-mail us at plantworld@isp.com. as a new paragraph of text  Click immediately before the p in plantworld on line 34. Type to start the e-mail link  Click immediately after the m in com in the e-mail address text. Type to end the e-mail link 23

24. 24

25. 25

26. 26

27.  Click immediately to the left of the B in Botanical on line 32. Type as the start tag  Click immediately to the right of the colon (:) in Botanical name: on line 32 and then type 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 27

28. 28

29.  Click immediately to the right of the on line 32. Type as the start tag  Click immediately to the right of the at the end of Agavaceae on line 32. Type as the end tag  Repeat the first two steps to italicize the other botanical names on lines 45, 57, and 69 29

30. 30

31.  Click immediately to the left of the word, DESERT, on line 11. Type as the start tag  Click immediately to the right of the word, PLANTS, on line 11. Type as the end tag 31

32. 32

33.  Highlight the words on line 31  Type and do not press the ENTER key  Highlight the words on line 44  Type to insert a left-aligned image with wrapped text 33

34.  Highlight the words on line 56  Type to insert a right-aligned image with wrapped text  Highlight the words on line 68  Type to insert a left-aligned image with wrapped text 34

35. 35

36.  Highlight the words on line 41 and then type as the tag  Highlight the words on line 65 and then type as the tag  Highlight the words  on line 53 and then type as the tag  Highlight the words on line 77 and then type as the tag 36

37. 37

38.  Click immediately to the left of Arizona on line 80 and type to add the text link  Click immediately to the right of Museum on line 81 and type to end the tag 38

39. 39

40.  Click immediately to the left of the tag on line 30  Type to create a link target named agaveamericana  Click immediately to the left of the tag on line 43  Type to create a link target named desertspoon 40

41.  Click immediately to the left of the tag on line 55  Type to create a link target named goldenbarrel  Click immediately to the left of the tag on line 67  Type to create a link target named pricklypear 41

42. 42

43.  Highlight the words on line 28  Type and then press the ENTER key  Type Agave Americana and then press the ENTER key  Type Desert Spoon and then press the ENTER key 43

44.  Type Golden Barrel and then press the ENTER key  Type Prickly Pear and then press the ENTER key  Type and then press the ENTER key 44

45. 45

46.  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 as the tag  Position the insertion point on the blank line 48 and then type To top as the tag  Press the ENTER key 46

47. 47

48.  Highlight the HTML code, To top, on line 48  Click Edit on the menu bar and then click Copy  Position the insertion point on line 61 48

49.  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 49

50. 50

51.  Click immediately to the left of <img on line 11  Type as the tag and then press the ENTER key  Click immediately to the right of alt=“ “/> on line 12 51

52.  Type as the tag  Click immediately to the left of alt=“ “/> on line 12  Type border=“0” and then press the SPACEBAR 52

53. 53