Scribd
Upload
33 views9 pages

Hyperlinks: Creating Hyperlink

Hyperlinks allow linking between web pages and elements within pages. They are defined using anchor tags with a href attribute pointing to the target URL or fragment. Hyperlinks can be triggered via mouse, keyboard, or image maps. Images and image maps can also be used as hyperlinks. Popup effects can be created using hyperlinks and CSS without an actual page link.

Uploaded by

pitra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
33 views9 pages

Hyperlinks: Creating Hyperlink

Hyperlinks allow linking between web pages and elements within pages. They are defined using anchor tags with a href attribute pointing to the target URL or fragment. Hyperlinks can be triggered via mouse, keyboard, or image maps. Images and image maps can also be used as hyperlinks. Popup effects can be created using hyperlinks and CSS without an actual page link.

Uploaded by

pitra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 9

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

You might also like