Project 3

1
Project 3

• Creating Web Pages with Links, Images, and
  Formatted Text

2
Project Objectives

• Describe linking terms and definitions
• Create a home page and enhance a Web page using
  images
• Use absolute and relative paths
• Align and add bold, italics, and color to text
• Change the bullet type used in an unordered list

3
Project Objectives

• Add a background image
• 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

4
Project Objectives

• Add an image with wrapped text
• 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
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

6
Entering HTML Tags to Define the Web Page
Structure
7
Adding an Image

• Type ltimg src"plantworldlg.jpg width"720
  height"84 alt"Plant World logo" /gt and then
  press the ENTER key

8
Adding an Image
9
Adding a Left-Aligned Heading with a Font Color

• With the insertion point on line 11, type
  lth1gtltfont color"000066"gtWelcome to Plant
  World!lt/fontgtlt/h1gt and then press the ENTER key

10
Adding a Left-Aligned Heading with a Font Color
11
Entering a Paragraph of Text

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

12
Entering a Paragraph of Text
13
Creating Unordered (Bulleted) Lists

• If necessary, click line 16
• Enter the HTML code shown in Table 3-3 on page
  HTM 85
• Press the ENTER key twice to insert a blank line
  on line 29, after the second lt/ulgt in the HTML
  code

14
Creating Unordered (Bulleted) Lists
15
Adding a Background Image

• Click immediately to the right of the y in the
  ltbodygt tag on line 9 and then press the SPACEBAR
• Type backgroundgreyback.jpg as the attribute

16
Adding a Background Image
17
Adding a Text Link to Another Web Page within the
Same Web Site

• Click immediately to the right of the lt/ulgt tag
  on line 28 and then press the DOWN ARROW key
  twice
• With the insertion point on line 30, type ltpgtTo
  learn more about the Plant World products and
  services, please browse the Plant World Web site
  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
  Southwest landscape!lt/pgt and then press the ENTER
  key
• Click immediately to the left of the d in desert
  on line 32
• Type lta href"desertplants.htm"gt to start the
  link
• Click immediately to the right of the s in plants
  on line 33. Type lt/agt to close the link

18
Adding a Text Link to Another Web Page within the
Same Web Site
19
Adding an E-Mail Link

• With the insertion point on line 34, type ltpgtHave
  a question or comment? Call us at (206) 555-PLANT
  or e-mail us at plantworld_at_isp.com. lt/pgt as a new
  paragraph of text. Click immediately before the p
  in plantworld on line 34. Type lta href"mailto
  plantworld_at_isp.com"gt to start the e-mail link
• Click immediately after the m in com in the
  e-mail address text. Type lt/agt to end the e-mail
  link

20
Adding an E-Mail Link
21
Saving and Printing an HTML File

• With a USB drive plugged into your computer,
  click File on the menu bar and then click Save
  As. Type plantworld.htm in the File name text box
• If necessary, click USB (G) 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

22
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 g\Project03\ProjectFiles\plantworld.htm in
  the Address text box
• Press the ENTER key

23
Viewing a Web Page
24
Testing Links in a Web Page

• Point to the e-mail link, plantworld_at_isp.com
• Click plantworld_at_isp.com
• Click the Close button in the New Message window
• With the USB drive in drive G, point to the link
  desert plants
• Click desert plants

25
Testing Links in a Web Page
26
Opening an HTML File

• Click the Notepad button on the taskbar
• With the USB drive plugged into your computer,
  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 USB drive (G). Click the Project03
  folder, and then click the ProjectFiles 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

27
Opening an HTML File
28
Formatting Text in Bold

• Click immediately to the left of the B in
  Botanical on line 32. Type ltbgt as the start tag
• Click immediately to the right of the colon ()
  in Botanical name on line 32, and then type lt/bgt
  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

29
Formatting Text in Bold
30
Formatting Text in Italics

• Click immediately to the right of the lt/bgt on
  line 32. Type ltemgt as the start tag
• Click immediately to the right of the at the end
  of Agavaceae on line 32. Type lt/emgt as the end
  tag
• Repeat the first two steps to italicize the other
  botanical names on lines 45, 57, and 69

31
Formatting Text in Italics
32
Formatting Text with a Font Color

• Click immediately to the left of the word,
  DESERT, on line 11. Type ltfont color"000099"gt
  as the start tag
• Click immediately to the right of the word,
  PLANTS, on line 11. Type lt/fontgt as the end tag

33
Formatting Text with a Font Color
34
Adding an Image with Wrapped Text

• Highlight the words lt!--Insert Agave image here
  --gt on line 31
• Type ltimg src"agave.jpg align"right"
  alt"Agave" width"212 height"203" /gt and do
  not press the ENTER key
• Highlight the words lt!--Insert Desert Spoon image
  here --gt on line 44
• Type ltimg srcdesertspoon.jpg" alignleft"
  altDesert Spoon width"245" height"198" /gt to
  insert a left-aligned image with wrapped text

35
Adding an Image with Wrapped Text

• Highlight the words lt!--Insert Golden Barrel
  image here --gt on line 56
• Type ltimg src"goldenbarrel.jpg" align"right"
  alt "Golden Barrel width"292" height"197" /gt
  to insert a right-aligned image with wrapped text
• Highlight the words lt! Insert Prickly Pear image
  here --gt on line 68
• Type ltimg src "pricklypear.jpg align"left
  alt "Prickly Pear" width"250 height"255" /gt
  to insert a left-aligned image with wrapped text

36
Adding an Image with Wrapped Text
37
Clearing the Text Wrapping

• Highlight the words lt!--Insert right break clear
  here --gt on line 41 and then type ltbr
  clear"right" /gt as the tag
• Highlight the words lt!--Insert right break clear
  here --gt on line 65 and then type ltbr
  clear"right" /gt as the tag
• Highlight the words
• lt!--Insert left break clear here --gt on line 53
  and then type ltbr clear"left" /gt as the tag
• Highlight the words lt!--Insert left break clear
  here --gt on line 77 and then type ltbr
  clear"left" /gt as the tag

38
Clearing the Text Wrapping
39
Adding a Text Link to a Web Page in Another Web
Site

• Click immediately to the left of Arizona on line
  80 and type lta href"http//www.desertmuseum.org"gt
  to add the text link
• Click immediately to the right of Museum on line
  81 and type lt/agt to end the tag

40
Adding a Text Link to a Web Page in Another Web
Site
41
Setting Link Targets

• Click immediately to the left of the ltfontgt tag
  on line 30
• Type lta name"agaveamericana"gtlt/agt to create a
  link target named agaveamericana
• Click immediately to the left of the ltfontgt tag
  on line 43
• Type lta name"desertspoon"gtlt/agt to create a link
  target named desertspoon

42
Setting Link Targets

• Click immediately to the left of the ltfontgt tag
  on line 55
• Type lta name"goldenbarrel"gtlt/agt to create a link
  target named goldenbarrel
• Click immediately to the left of the ltfontgt tag
  on line 67
• Type lta name"pricklypear"gtlt/agt to create a link
  target named pricklypear

43
Setting Link Targets
44
Adding Links to Link Targets within a Web Page

• Highlight the words lt!--Start unordered list here
  --gt on line 28
• Type ltul type"square"gt and then press the ENTER
  key
• Type ltligtlta href"agaveamericana"gt Agave
  Americana lt/agtlt/ligt and then press the ENTER key
• Type ltligtlta href"desertspoon"gt Desert
  Spoonlt/agtlt/ligt and then press the ENTER key

45
Adding Links to Link Targets within a Web Page

• Type ltligtlta href "goldenbarrel"gtGolden
  Barrellt/agtlt/ligt and then press the ENTER key
• Type ltligtlta href"pricklypear"gt Prickly
  Pearlt/agtlt/ligt and then press the ENTER key
• Type lt/ulgt and then press the ENTER key

46
Adding Links to Link Targets within a Web Page
47
Adding Links to a Target at the Top of the Page

• Click to the left of the gt symbol on line 9, and
  then press the ENTER key
• Position the insertion point on line 10 and type
  lta name"top"gtlt/agt as the tag
• Position the insertion point on the blank line 48
  and then type ltpgtlta href"top"gtltfont size-1gtTo
  toplt/fontgt lt/agtlt/pgt as the tag
• Press the ENTER key

48
Adding Links to a Target at the Top of the Page
49
Copying and Pasting HTML Code

• Highlight the HTML code, ltpgtlta href"top"gtltfont
  size -1gt To top lt/fontgt lt/agtlt/pgt, on line 48
• Click Edit on the menu bar and then click Copy
• Position the insertion point on line 61

50
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

51
Copying and Pasting HTML Code
52
Adding an Image Link to a Web Page

• Click immediately to the left of ltimg on line 11
• Type lta href"plantworld.htm"gt as the tag and
  then press the ENTER key
• Click immediately to the right of alt /gt on
  line 12

53
Adding an Image Link to a Web Page

• Type lt/agt as the tag
• Click immediately to the left of alt /gt on
  line 12
• Type border0 and then press the SPACEBAR

54
Adding an Image Link to a Web Page
55
Saving and Printing the HTML File

• Save the HTML file by clicking File on the menu
  bar, and then clicking Save on the File menu
• Click File on the menu bar, and then click Print
  on the File menu

56
Saving and Printing the HTML File
57
Viewing and Testing a Web Page

• Click the Desert Plants button on the taskbar to
  view the page in your browser
• Click the Refresh button on the Standard toolbar

58
Printing a Web Page

• Click the Print button on the Standard toolbar

59
Quitting Notepad and a Browser

• Click the Close button on the browser title bar
• Click the Close button on the Notepad window
  title bar

60
Project Summary

• Describe linking terms and definitions
• Create a home page and enhance a Web page using
  images
• Use absolute and relative paths
• Align and add bold, italics, and color to text
• Change the bullet type used in an unordered list

61
Project Summary

• Add a background image
• 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

62
Project Summary

• Add an image with wrapped text
• 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

63
Project 3 Complete

• Creating Web Pages with Links, Images, and
  Formatted Text