HTML

Comprehensive Concepts and Techniques

Third Edition

Project 5
Creating an
Image Map
 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
HTML Project 5: Creating an Image Map 2
 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
HTML Project 5: Creating an Image Map 3
 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

HTML Project 5: Creating an Image Map 4

 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
HTML Project 5: Creating an Image Map 5
 Starting Paint

HTML Project 5: Creating an Image Map 6

 Opening an Image File in Paint
• 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:)
• Double-click the Project05 folder and then
double-click the ProjectFiles folder in the
list of available folders

HTML Project 5: Creating an Image Map 7

 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

HTML Project 5: Creating an Image Map 8

 Opening an Image File in Paint

HTML Project 5: Creating an Image Map 9

 Locating X- and Y- Coordinates
of an Image
• If necessary, click the Select button in the
toolbox
• Move the mouse pointer to coordinates (3,171)
• Move the mouse pointer to coordinates (77,310)
• Move the mouse pointer to points C through J 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

HTML Project 5: Creating an Image Map 10

 Locating X- and Y- Coordinates
of an Image

HTML Project 5: Creating an Image Map 11

 Starting Notepad
and Entering Initial HTML Tags

HTML Project 5: Creating an Image Map 12

 Creating a Table
• With the insertion point on line 10, type
<table align="left“ border="0"
cols="2“ rows="2“ width="75%">
and then press the ENTER key
• Type <tr valign=“top”> and then
press the ENTER key

HTML Project 5: Creating an Image Map 13

 Creating a Table

HTML Project 5: Creating an Image Map 14

 Inserting an Image in a Table
• If necessary, click line 12
• Type <td><p><img
src="ibrahimlogo.gif"
width="320“ height="97" /></p>
and then press the ENTER key

HTML Project 5: Creating an Image Map 15

 Inserting an Image in a Table

HTML Project 5: Creating an Image Map 16

 Adding Text to a Table Cell
• Enter the following HTML beginning on
line 13

HTML Project 5: Creating an Image Map 17

 Adding an Image to Use as an
Image Map
• If necessary, click line 27
• Type <td> and then press the ENTER key
• Type <p><imgsrc="floorplan.gif“
width="350“ height="389“
border="0“ hspace="20" and then
press the ENTER key

HTML Project 5: Creating an Image Map 18

 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

HTML Project 5: Creating an Image Map 19

 Creating a Horizontal Menu Bar
with Text Links
• Enter the following HTML beginning on
line 33

HTML Project 5: Creating an Image Map 20

 Creating an Image Map
• Enter the following HTML beginning on
line 44

HTML Project 5: Creating an Image Map 21

 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

HTML Project 5: Creating an Image Map 22

 Changing Link Colors

HTML Project 5: Creating an Image Map 23

 Saving and Printing the HTML File
• With a floppy disk in drive A, click File on the
menu bar and then click Save As. Type
hometour.htm in the File name text box
• If necessary, click 31⁄2 Floppy (A:) 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

HTML Project 5: Creating an Image Map 24

 Saving and Printing the HTML File

HTML Project 5: Creating an Image Map 25

 Viewing and Printing the Web Page
Using a Browser
• Start the browser
• If necessary, click the Maximize button to
maximize the browser window
• Type a:\Project05\ProjectFiles\
hometour.htm in the Address box and
then press the ENTER key
• Click the Print button on the Standard
Buttons toolbar
HTML Project 5: Creating an Image Map 26
 Viewing and Printing the Web Page
Using a Browser

HTML Project 5: Creating an Image Map 27

 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

HTML Project 5: Creating an Image Map 28

 Copying and Pasting HTML Code
to a New File

HTML Project 5: Creating an Image Map 29

 Changing the Title
• Highlight the words, Home Tour Home Page,
between the <title> and </title> tags on line 7.
Type Kitchen as the title to delete the words,
Home Tour Home Page, and replace them with
the word Kitchen
• 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

HTML Project 5: Creating an Image Map 30

 Changing the Title

HTML Project 5: Creating an Image Map 31

 Adding a Heading
• Enter the following HTML beginning on
line 11

HTML Project 5: Creating an Image Map 32

 Adding Paragraphs of Text
• Enter the following HTML beginning on
line 17

HTML Project 5: Creating an Image Map 33

 Adding an Image
• Enter the following HTML beginning on
line 26

HTML Project 5: Creating an Image Map 34

 Creating a Horizontal Menu Bar
• Enter the following HTML beginning on
line 32

HTML Project 5: Creating an Image Map 35

 Saving and Printing the HTML File
• With a floppy disk in drive A, click File on the
menu bar and then click Save As. Type
kitchen.htm in the File name text box
• If necessary, click 31⁄2 Floppy (A:) 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

HTML Project 5: Creating an Image Map 36

 Saving and Printing the HTML File

HTML Project 5: Creating an Image Map 37

 Viewing and Printing the Web Page
• Click the Internet Explorer button on the
taskbar
• Click the Kitchen area on the floor plan
image map
• Click the Print button on the Standard
Buttons toolbar

HTML Project 5: Creating an Image Map 38

 Viewing and Printing the Web Page

HTML Project 5: Creating an Image Map 39

 Testing the Links
• Click the Home link on the Kitchen Web page
• Click the Master Bedroom area on the image
map on the home page
• Click the Living link on the Master Bedroom Web
page
• Click the Library link on the Living Room Web
page
• Click the Dining link on the Library Web page

HTML Project 5: Creating an Image Map 40

 Testing the Links

HTML Project 5: Creating an Image Map 41

 Quitting Notepad and a Browser
• Click the Close button on the browser title
bar
• Click the Close button on the Notepad
window title bar

HTML Project 5: Creating an Image Map 42

 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
HTML Project 5: Creating an Image Map 43
 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
HTML Project 5: Creating an Image Map 44
 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

HTML Project 5: Creating an Image Map 45

 HTML
Comprehensive Concepts and Techniques
Third Edition

Project 5 Complete