HTML Concepts and Techniques Fourth Edition Project 7 Creating a Form on a Web Page.
HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.
-
Upload
corey-nicholson -
Category
Documents
-
view
216 -
download
0
Transcript of HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.
![Page 1: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/1.jpg)
HTMLConcepts and Techniques
Fourth Edition
Project 5
Creating anImage Map
![Page 2: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/2.jpg)
Project 5: Creating an Image Map 2
Project Objectives
• Define terms relating to image mapping• List the differences between server-side and
client-side image maps• Name the two components of an image map and
describe the steps to implement an image map• Distinguish between appropriate and
inappropriate images for mapping• Sketch hotspots on an image
![Page 3: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/3.jpg)
Project 5: Creating an Image Map 3
Project Objectives
• Describe how the x- and y-coordinates relate to vertical and horizontal alignment
• Open an image in Paint and use Paint to map the coordinates of an image
• Create the home page and additional Web pages• Create a table, insert an image into a table, and
use the usemap attribute to define a map
![Page 4: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/4.jpg)
Project 5: Creating an Image Map 4
Project Objectives
• Add text to a table cell and create a horizontal menu bar with text links
• Use the <map> </map> tags to start and end a map
• Use the <area> tag to indicate the shape, coordinates, and URL for a mapped area
• Change link colors
![Page 5: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/5.jpg)
Project 5: Creating an Image Map 5
Starting Paint
• Click the Start button on the taskbar• Point to All Programs on the Start menu, point to
Accessories on the All Programs submenu, and then point to Paint on the Accessories submenu
• Click Paint• If necessary, click the Maximize button on the
right side of the title bar to maximize the window
![Page 6: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/6.jpg)
Project 5: Creating an Image Map 6
Starting Paint
![Page 7: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/7.jpg)
Project 5: Creating an Image Map 7
Opening an Image File in Paint
• With a 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 UDISK (G:)
• Double-click the Project05 folder and then double-click the ProjectFiles folder in the list of available folders
![Page 8: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/8.jpg)
Project 5: Creating an Image Map 8
Opening an Image File in Paint
• If necessary, click the Files of type box arrow and select GIF (*.GIF)
• Click floorplan.gif in the list of files• Click the Open button in the Open dialog box
![Page 9: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/9.jpg)
Project 5: Creating an Image Map 9
Opening an Image File in Paint
![Page 10: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/10.jpg)
Project 5: Creating an Image Map 10
Locating X- and Y- Coordinates of an Image
• If necessary, click the Pencil button in the toolbox• Move the mouse pointer to coordinates (102,255)• Move the mouse pointer to coordinates (142,279)• Move the mouse pointer to points C through H to verify
the x- and y- coordinates in Table 5-1 on page HTM 210• After you have finished, click the Close button on the right
side of the title bar
![Page 11: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/11.jpg)
Project 5: Creating an Image Map 11
Locating X- and Y- Coordinates of an Image
![Page 12: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/12.jpg)
Project 5: Creating an Image Map 12
Starting Notepad and Entering Initial HTML Tags
![Page 13: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/13.jpg)
Project 5: Creating an Image Map 13
Creating a Table
• With the insertion point on line 10, type <table align="left“ border="0" cols="2“ rows=“1“ width="75%"> and then press the ENTER key
• Type <tr valign=“top”> and then press the ENTER key
![Page 14: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/14.jpg)
Project 5: Creating an Image Map 14
Creating a Table
![Page 15: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/15.jpg)
Project 5: Creating an Image Map 15
Inserting an Image in a Table
• If necessary, click line 12• Type <td><p><img src="ibrahimlogo.gif" width=“228“ height=“53" /></p> and then press the ENTER key
![Page 16: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/16.jpg)
Project 5: Creating an Image Map 16
Inserting an Image in a Table
![Page 17: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/17.jpg)
Project 5: Creating an Image Map 17
Adding Text to a Table Cell
• Enter the following HTML beginning on line 13
![Page 18: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/18.jpg)
Project 5: Creating an Image Map 18
Creating a Horizontal Menu Bar with Text Links
• Enter the following HTML beginning on line 26
![Page 19: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/19.jpg)
Project 5: Creating an Image Map 19
Adding an Image to Use as an Image Map
• If necessary, click line 32• Type <td> and then press the ENTER key• Type <p><img src="floorplan.gif“ width="367“ height=“436“ border="0“ hspace="20" and then press the ENTER key
![Page 20: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/20.jpg)
Project 5: Creating an Image Map 20
Adding an Image to Use as an Image Map
• Type usemap="#tour" /></p> and then press the ENTER key
• Type </td> and then press the ENTER key• Type </tr> and then press the ENTER key
twice• Type </table> and then press the ENTER key
twice
![Page 21: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/21.jpg)
Project 5: Creating an Image Map 21
Creating an Image Map
• Enter the following HTML beginning on line 39
![Page 22: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/22.jpg)
Project 5: Creating an Image Map 22
Changing Link Colors
• Click immediately to the right of the y in the <body> tag on line 9 and then press the SPACEBAR
• Type link="navy“ alink="navy“ vlink="navy" for the link colors
![Page 23: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/23.jpg)
Project 5: Creating an Image Map 23
Changing Link Colors
![Page 24: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/24.jpg)
Project 5: Creating an Image Map 24
Saving and Printing the HTML File
• With a USB drive plugged into your computer, click File on the menu bar and then click Save As. Type hometour.html in the File name text box
• If necessary, click UDISK (G:) in the Save in list. Click the Project05 folder and then double-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 25: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/25.jpg)
Project 5: Creating an Image Map 25
Saving and Printing the HTML File
![Page 26: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/26.jpg)
Project 5: Creating an Image Map 26
Viewing and Printing the Web Page Using a Browser
• Start the browser• If necessary, click the Maximize button to
maximize the browser window• Type G:\Project05\ProjectFiles\hometour.htm in the Address box and then press the ENTER key
• Click the Print button on the Standard Buttons toolbar
![Page 27: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/27.jpg)
Project 5: Creating an Image Map 27
Viewing and Printing the Web Page Using a Browser
![Page 28: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/28.jpg)
Project 5: Creating an Image Map 28
Copying and Pasting HTML Code to a New File
• Click the Notepad button on the taskbar• When the hometour.htm file is displayed in the
Notepad window, click immediately to the left of the < in the <!DOCTYPE html tag on line 1. Drag through the <body link="navy" alink="navy" vlink="navy"> tag on line 9 to highlight lines 1 through 9
• Press CTRL+C to copy the selected lines to the Clipboard
• Click File on the menu bar and then click New• Press CTRL+V to paste the contents of the Clipboard
into a new file
![Page 29: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/29.jpg)
Project 5: Creating an Image Map 29
Copying and Pasting HTML Code to a New File
![Page 30: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/30.jpg)
Project 5: Creating an Image Map 30
Changing the Web Page Title
• Highlight the words, Home Tour Home Page, between the <title> and </title> tags on line 7. Type Entry as the title to delete the words, Home Tour Home Page, and replace them with the word Entry
• Click immediately to the right of the vlink="navy"> tag on line 9 and then press the ENTER key twice
• Type </body> and then press the ENTER key• Type </html> and then click line 11
![Page 31: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/31.jpg)
Project 5: Creating an Image Map 31
Changing the Title
![Page 32: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/32.jpg)
Project 5: Creating an Image Map 32
Adding a Heading
• Enter the following HTML beginning on line 11
![Page 33: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/33.jpg)
Project 5: Creating an Image Map 33
Adding Paragraphs of Text
• Enter the following HTML beginning on line 17
![Page 34: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/34.jpg)
Project 5: Creating an Image Map 34
Adding an Image
• Enter the following HTML beginning on line 26
![Page 35: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/35.jpg)
Project 5: Creating an Image Map 35
Creating a Horizontal Menu Bar
• Enter the following HTML beginning on line 32
![Page 36: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/36.jpg)
Project 5: Creating an Image Map 36
Saving and Printing the HTML File
• With a USB drive plugged into your computer, click File on the menu bar and then click Save As. Type entry.html in the File name text box
• If necessary, click UDISK (G:) in the Save in list. Click the Project05 folder and then double-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 37: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/37.jpg)
Project 5: Creating an Image Map 37
Saving and Printing the HTML File
![Page 38: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/38.jpg)
Project 5: Creating an Image Map 38
Viewing and Printing the Web Page
• Click the Internet Explorer button on the taskbar• Click the Entry area on the floor plan image map• Click the Print button on the Standard Buttons
toolbar
![Page 39: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/39.jpg)
Project 5: Creating an Image Map 39
Viewing and Printing the Web Page
![Page 40: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/40.jpg)
Project 5: Creating an Image Map 40
Testing the Links
• Click the Home link on the Entry Web page• Click the Backyard area on the image map on the home
page• Click the Living link on the Backyard Web page• Click the Dining link on the Living Web page
![Page 41: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/41.jpg)
Project 5: Creating an Image Map 41
Testing the Links
![Page 42: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/42.jpg)
Project 5: Creating an Image Map 42
Quitting Notepad and a Browser
• Click the Close button on the browser title bar• Click the Close button on the Notepad window
title bar
![Page 43: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/43.jpg)
Project 5: Creating an Image Map 43
Project Summary
• Define terms relating to image mapping• List the differences between server-side and
client-side image maps• Name the two components of an image map and
describe the steps to implement an image map• Distinguish between appropriate and
inappropriate images for mapping• Sketch hotspots on an image
![Page 44: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/44.jpg)
Project 5: Creating an Image Map 44
Project Summary
• Describe how the x- and y-coordinates relate to vertical and horizontal alignment
• Open an image in Paint and use Paint to map the coordinates of an image
• Create the home page and additional Web pages• Create a table, insert an image into a table, and
use the usemap attribute to define a map
![Page 45: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/45.jpg)
Project 5: Creating an Image Map 45
Project Summary
• Add text to a table cell and create a horizontal menu bar with text links
• Use the <map> </map> tags to start and end a map
• Use the <area> tag to indicate the shape, coordinates, and URL for a mapped area
• Change link colors
![Page 46: HTML Concepts and Techniques Fourth Edition Project 5 Creating an Image Map.](https://reader036.fdocuments.in/reader036/viewer/2022062517/56649f1f5503460f94c36f11/html5/thumbnails/46.jpg)
HTMLConcepts and Techniques
Fourth Edition
Project 5 Complete
Creating anImage Map