HTML and CSS Reference
In-Depth Information
To Save an HTML File
With the initial HTML code for the Lake Tahanna Tourism home page entered, you
should save the file. Saving the file frequently ensures you won't lose your work. Saving
a file in Notepad++ also adds color to code that can help you identify different elements
more easily.
1
Click File on the menu bar, click Save, and then type
tahanna.html
in the File name text
box (do not press
e n t e r
).
2
Navigate to the storage device and folder (Chapter05\ChapterFiles) where you save
your Data Files and then click the Save button in the Save As dialog box to save
the file.
Inserting an Image to Use as an Image Map
The next step in creating the home page is to add the image that will be used
as the image map. The image, tahanna.jpg, is stored in the Data Files for Students.
This image consists of four words (Home, Skiing, Boating, Dining) that are used as
navigation, separated by vertical lines, and placed upon a photo of the Lake Tahanna
region.
Table 5-4 shows the attributes associated with the <img> tag. The usemap
attribute, a client-side image map, is what you use in this project. A client-side
image map is an image map that is run by the browser (the client) rather than
by a CGI script on the Web server. You provide all the information required to
run the map, the image, and the hotspot coordinates in your HTML document.
The map's functions are provided on the client's side, rather than on the server's
side. When a visitor clicks a hotspot on the image map, the browser opens the
corresponding URL.
A server-side image map uses CGI scripts to make the map work. The ismap
attribute tells the browser to send the coordinates of the user mouse click directly to
an associated map file on the server. If you look in Appendix C, Accessibility Standards
and the Web, you will see that there is a reason to use client-side image maps instead of
server-side image maps from a usability standpoint. The guideline in §1194.22(f ) states,
“Client-side image maps shall be provided instead of server-side image maps except where
the regions cannot be defined with an available geometric shape.” Also, the WCAG 2.0
Guidelines address this issue in guideline 1.4.5 where it says, “If the technologies being
used can achieve the visual presentation, text is used to convey information rather than
images of text.”
Table 5-4 Tag Attributes Used to Create Image Maps
Tag
Attribute
Function
<img>
usemap
ismap
• Indicates the URL of a client-side image map
• Indicates a server-side image map
