Tutorial 2 –
Session 2
Developing a Basic
Web Site
Objectives
•
•
•
•
•
Mark a location with the id attribute
Create a link to an id
Mark an image as a link
Create an image map from an inline image
Remove an image border
New Perspectives on HTML, XHTML, and XML,
Comprehensive, 3rd Edition
New Perspectives on HTML and XHTML, Comprehensive
2
Using the id Attribute
• To jump to a specific location within a document, you
first need to mark that location
• One way to identify elements in an HTML document is to
use the id attribute
• Id names must be unique
• Id names are not case sensitive
New Perspectives on HTML, XHTML, and XML,
Comprehensive, 3rd Edition
New Perspectives on HTML and XHTML, Comprehensive
3
Linking to Locations within
Documents
• To create a link within a document, you enclose the
content that you want to format as a link in an <a> tag,
and use the href attribute to identify the link target
• A link’s content is not limited to text
• Generally, a link should not contain any block-level
elements
New Perspectives on HTML, XHTML, and XML,
Comprehensive, 3rd Edition
New Perspectives on HTML and XHTML, Comprehensive
4
Linking to Locations within
Documents
New Perspectives on HTML, XHTML, and XML,
Comprehensive, 3rd Edition
New Perspectives on HTML and XHTML, Comprehensive
5
Creating Links between
Documents
• To create a link to a specific location in another file, enter
the code
<a href="reference#id">content</a>
where reference is a reference to an HTML or XHTML
file and id is the id of an element marked within that file
New Perspectives on HTML, XHTML, and XML,
Comprehensive, 3rd Edition
New Perspectives on HTML and XHTML, Comprehensive
6
Creating Links between
Documents
New Perspectives on HTML, XHTML, and XML,
Comprehensive, 3rd Edition
New Perspectives on HTML and XHTML, Comprehensive
7
Working with Linked Images
and Image Maps
• A standard practice on the Web is to turn the Web site’s
logo into a hypertext link pointing to the home page
<a href="reference"><img src="file"
alt="text" /></a>
• HTML also allows you to divide an image into different
zones, or hotspots, each linked to a different destination
New Perspectives on HTML, XHTML, and XML,
Comprehensive, 3rd Edition
New Perspectives on HTML and XHTML, Comprehensive
8
Working with Linked Images
and Image Maps
New Perspectives on HTML, XHTML, and XML,
Comprehensive, 3rd Edition
New Perspectives on HTML and XHTML, Comprehensive
9
Working with Linked Images
and Image Maps
• To define these hotspots, you create an image map that
matches a specified region of the inline image to a
specific destination
• To define these hotspots, you create an image map that
matches a specified region of the inline image to a
specific destination
New Perspectives on HTML, XHTML, and XML,
Comprehensive, 3rd Edition
New Perspectives on HTML and XHTML, Comprehensive
10
Client-Side Image Maps
• A client-side image map is inserted in an image map
into the HTML file
• The browser locally processes the image map
• Because all of the processing is done locally, you can
easily test Web pages
• More responsive than server-side maps
• The browser’s status bar displays the target of each
hotspot
• Older browsers do not support client-side images
New Perspectives on HTML, XHTML, and XML,
Comprehensive, 3rd Edition
New Perspectives on HTML and XHTML, Comprehensive
11
Defining Hotspots
• Define a hotspot using two properties:
– Its location in the image
– Its shape
• Syntax of the hotspot element:
<area shape=“shape” coords=“coordinates” href=“url”
alt=“text” />
New Perspectives on HTML, XHTML, and XML,
Comprehensive, 3rd Edition
New Perspectives on HTML and XHTML, Comprehensive
12
Creating a Rectangular Hotspot
• Two points define a rectangular hotspot:
– the upper-left corner
– the lower-right corner
• A sample code for a rectangular hotspot is:
<area shape=“rect” coords=“384,61,499,271”
href=“water.htm”>
– Coordinates are entered as a series of four numbers
separated by commas
– HTML expects that the first two numbers represent the
coordinates for the upper-left corner of the rectangle, and
the second two numbers indicate the location of the lowerright corner
– The hotspot is a hypertext link to water.htm
New Perspectives on HTML, XHTML, and XML,
Comprehensive, 3rd Edition
New Perspectives on HTML and XHTML, Comprehensive
13
Creating a Circular Hotspot
• A circular hotspot is defined by the location of its center
and its radius
• A sample code for a circular hotspot is:
<area shape=“circle” coords=“307,137,66”
href=“karts.htm”>
– Coordinates are (307, 137), and it has a radius of 66
pixels
– The hotspot is a hypertext link to karts.htm
New Perspectives on HTML, XHTML, and XML,
Comprehensive, 3rd Edition
New Perspectives on HTML and XHTML, Comprehensive
14
Creating a Polygonal Hotspot
• To create a polygonal hotspot, you enter the coordinates
for each vertex in the shape
• A sample code for a polygonal hotspot is:
<area shape=“polygon”
coords=“13,60,13,270,370,270,370,225,230,225,
230,60” href=“rides.htm”>
– Coordinates are for each vertex in the shape
– The hotspot is a hypertext link to rides.htm
New Perspectives on HTML, XHTML, and XML,
Comprehensive, 3rd Edition
New Perspectives on HTML and XHTML, Comprehensive
15
Creating a Default Hotspot
• <area shape="default" coords="0, 0, x, y" … />
where x is the width of the inline image in pixels and y is
the image’s height
• Any spot that is not covered by another hotspot will
activate the default hotspot link
New Perspectives on HTML, XHTML, and XML,
Comprehensive, 3rd Edition
New Perspectives on HTML and XHTML, Comprehensive
16
Creating a Client-Side Image Map
New Perspectives on HTML, XHTML, and XML,
Comprehensive, 3rd Edition
New Perspectives on HTML and XHTML, Comprehensive
17
Applying an Image Map
New Perspectives on HTML, XHTML, and XML,
Comprehensive, 3rd Edition
New Perspectives on HTML and XHTML, Comprehensive
18
Server-Side Image Maps
• In a server-side image map, the image map is stored
on the Web server
• Server-side image maps are supported by most
graphical browsers
• Server-side image maps can be slow to operate
• The browser’s status bar does not display the target of
each hotspot
New Perspectives on HTML, XHTML, and XML,
Comprehensive, 3rd Edition
New Perspectives on HTML and XHTML, Comprehensive
19
Introducing URLs
• To create a link to a resource on the Internet, you need
to know its URL
• A Uniform Resource Locator (URL) specifies the
precise location of a resource on the Internet
• A protocol is a set of rules defining how information is
exchanged between two resources
New Perspectives on HTML, XHTML, and XML,
Comprehensive, 3rd Edition
New Perspectives on HTML and XHTML, Comprehensive
20
Tutorial Summary
• Creating Web pages linked together
• Links to locations within documents and from another
document
• Inline images and image maps
New Perspectives on HTML, XHTML, and XML,
Comprehensive, 3rd Edition
New Perspectives on HTML and XHTML, Comprehensive
21