Hyperlinks

Creating Hyperlink
Create Hyperlink
• Hyperlinks are enclosed between anchor tags, which specify the
target URL to an href (hyperlink reference) attribute in the opening
tag
• The web browser will display a hyperlink in a manner that
distinguishes it from regular text – typically hypertext gains an
underline and image-based hyperlinks gain a colored border
• Each web page hyperlink is sensitive to three interactive states:
• Hover – gaining focus, the cursor is placed over the hyperlink.
• Active – retrieving the linked resource, the user clicks the hyperlink.
• Visited – the linked resource has previously been retrieved.
Accessing links via keys
• Pointer – a mouse or similar device places a screen pointer over a
hyperlink, then the user clicks to access its target.
• Tab – repeatedly hit the Tab key to successively focus on each
hyperlink in turn, then hit Return to access the target of the currently
selected hyperlink.
• Access Key – hit a designated character key to focus on a particular
hyperlink, then hit Return to access its target.
Linking to fragment
• Hyperlinks can target a specific point in a document that has been
created with a “fragment” identifier – an element with a unique
identifying name assigned to an id attribute in its opening tag. Within
the hyperlink, the fragment identifier is specified to a href attribute in
the opening tag prefixed by a # hash character
• er. For example, the tag targets an element within the same
document that contains the unique fragment identifier name of “top”.
Linking to protocol
• The href attribute of a hyperlink will typically target a resource using
the HyperText Transfer protocol http: but it may also target resources
using other protocols.
• Script functions can be called with the javascript: protocol, and email
clients can be invoked by the mailto: protocol:
Using images as hyperlinks
• To make the navigational features of an HTMLdocument more visually
appealing, images can be used as hyperlinks
• – simply by nesting an <img> element within <a>
Producing Image Map Links
• A single image can target multiple hyperlink resources if an image “map” is
added to define “hot spot” areas for each hyperlink.
• To use an image map, the <img> tag must include a usemap attribute to
specify a map name, prefixed by a # hash character
• The image map itself is contained between tags, and its name is specified
by a name attribute in the opening tag
• Each area of the image that is to become a hyperlink hot spot is defined by
four attributes of an tag within the element.
• The shape attribute specifies its shape as rect (rectangle), circle or poly
(polygon), and the coords attribute specifies a comma-separated list of its
x-axis and y-axis coordinates
Producing Image Map links
Generating Popups
• Hyperlinks can also be used without an actual target resource to
perform both CSS rollovers and “popup” effects
• Typically, the hyperlink’s anchor tag href attribute will specify a #null
value in this case.
• The CSS a:hover pseudo-class can create hot spots – much like the
image map hot spots in the previous example
• In response, the style rules can reveal previously hidden
HTMLelements to be displayed as popups in front of other content