DDW Topic 4

Topic 4 Hyperlinks Designing and Developing a Website
V1.0 Visuals Handout Page 1

Designingand Developing a
NCC Education Limited V1.0
Designing and Developing a
Website
Topic 4:
Hyperlinks
Hyperlinks Topic 4 - 4.2
Scope and Coverage
This topic will cover:
Using the anchor element
Relative and absolute URLs
In-page hyperlinks
In-page hyperlinks
The HTML 5 <nav>element
CSS and hyperlinks
Accessible hyperlinks
Learning Outcomes
By the end of this topic, students will be able to:
Link different web pages together using the anchor
element
Link to specific parts of a web page using the
h l t
anchor element
Use CSS to style hyperlinks
Explain how disabled users navigate websites
Discuss strategies for making hyperlinks accessible
to both disabled and mobile devices users
A key feature of the web is hyperlinks.
Allows us to surf the web
There is only one element responsible for creating
hyperlinks.
Hyperlinks
hyperlinks.
The anchor element <a>
The anchor element specifies the enclosed content
is a hyperlink.
The Anchor Element
<p>The <a href="http://www.wwf.org/">World Wide Fund for
Nature (WWF)</a>is an international organisation concerned
with conservation of the natural world.</p>
is a hyperlink.
Browsers render the content of hyperlink elements
as underlined text.
The href attribute specifies the URL of the page to
which the user will be linked.
In this example - http://www.wwf.org/
The address of a resource and how it can be
retrieved
Specifies the location of document on the web to
Uniform Resource Locators
(URLs)
which we want to create a link
There are two type of URLs
Absolute
Relative
Protocol name
Absolute URLs - 1
http://www.nhm.ac.uk/about-us/index.html
protocol domain path
Protocol name
The mechanism for accessing the resource - http
Domain name
The name of the web server where the web page is
stored - www.nhm.ac.uk
Pathname
Specifies the location of the page on the server
about-us/index.html
Absolute URLs are used when linking to web
Absolute URLs - 2
pages in a separate website.
External hyperlinks
A website on a different web server
Relative URLs describe the location of a document
relative to the current documents location.
Relative URLs are when linking pages together in
the same site.
Relative URLs - 1
Internal hyperlinks
In your assessment, you will be expected to link
pages together using relative URLs.
Relative URLs - 2
root
careers news about index.html
benefits.html
locations.html
press.html
media.html contact_us.html
our_values.html
A hyperlink in the page culture.html
that links to the page locations.html
would look like
culture.html
investors
financial.html
annual_reports.html
<a href="locations.html">locations</a>
Relative URLs - 3
root
benefits.html
locations.html
press.html
our_values.html
A hyperlink in the page contact_us.html
that links to the page financial.html
would look like
culture.html
investors
financial.html
annual_reports.html
<a href="investors/financial.html">financial</a>
Relative URLs - 4
root
benefits.html
locations.html
press.html
our_values.html
A hyperlink in the page media.html that
links to the page index.html would look
like
culture.html
investors
financial.html
annual_reports.html
<a href="../index.html">Home</a>
Relative URLs - 5
root
benefits.html
locations.html
press.html
our_values.html
A hyperlink in the page benefits.html
that links to the page press.html would
look like
culture.html
investors
financial.html
annual_reports.html
<a href="../news/press.html">Press Releases</a>
Do not use spaces in file names or special
characters (e.g. ?,#, /).
Use letters, numbers, underscores (_) and hyphens
(-)
C f
File Naming Conventions - 1
Consistently use the same filename extension.
HTML pages can have an extension of .htm or
.html.
Use all lowercase letters.
Some web servers are case-sensitive.
Keep filenames short.
Easier to remember
Place related files into subdirectories.
Keeps the site organised.
File Naming Conventions - 2
Name the homepage index.html (or index.htm).
Most web servers are configured to serve a file
named index.html as the default page for a
directory.
It is also possible to link to a different point in the
In-Page Hyperlinks - 1
<h2 id="sales">Sales and Marketing</h2>
<p>The importance of sales and marketing
to for new businesses is extremely
important...
It is also possible to link to a different point in the
same document.
The user does not have to scroll to view content.
The destination element needs to feature an id
attribute.
The id attribute uniquely identifies an element.
To link to this part of the page the href attribute is
In-Page Hyperlinks - 2
<h2 id="sales">Sales and Marketing</h2>
<p>The importance of sales and marketing
for new businesses is extremely important...
<a href="#sales">Sales and Marketing</a>
To link to this part of the page, the href attribute is
the value of the id attribute preceded by a hash (#).
We can link to a specific point in a separate page
by adding a hash mark at the end of the URL.
<a href="business_advice.html#sales">Sales and
Marketing</a>
The title attribute can be used to describe the
content that will be linked.
The Title Attribute
<a href="../news/press.html" title="Read our press
releases">Press Releases</a>
Browsers often display the title as a tooltip.
The title attribute is not visible by default.
Should be used to provide additional information
Important information should not be hidden in a title
attribute.
Hyperlinks and Valid Documents
... just contact us.</p>
<a href="contact.html">Contact Us</a>
<h2>Further Information</h2>
<p>
<a href="contact.html">Contact Us</a>
</p>
Invalid
Valid
The XHTML 1.0 Strict specification defines the <a>
element as being an inline element
Must be nested inside a block level element
In HTML 5, links can be wrapped around block
level elements.
</p>
Hyperlinks and List Elements
<ul>
<li><a href="careers.html">Careers</a></li>
<li><a href="news.html">News</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact Us</a></li>
It is common to structure a collection of hyperlinks
as a list.
Each link is nested inside a <li>element.
</ul>
The HTML 5 <nav>Element
<nav>
<ul>
<li><a href="careers.html">Careers</a></li>
<li><a href="news.html">News</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
HTML 5 introduces a new <nav>element for
grouping together hyperlinks.
For grouping major navigation blocks
Provide assistance to screen readers
</ul>
</nav>
CSS psuedo-classes allow us to select elements
using factors not present in the HTML of a
document.
The :visited, :hover and :active psuedo-classes
allowus to style hyperlinks based on the state of
CSS for Hyperlinks - 1
allow us to style hyperlinks based on the state of
the hyperlink.
:visited the user has followed this link
:hover the cursor is over the link
:active when the link is being activated (clicked)
CSS for Hyperlinks - 2
a{background-color:red}
a:visited{background-color:yellow}
a:hover{background-color:blue}
a:active{background-color:green}
Psuedo-classes are commonly used to create
rollover effects for links.
The psuedo-classes must appear in the order
specified above in order to work correctly.
Many disabled people surf the web using their
keyboard rather than the mouse.
Using the Tab and Enter keys
Link text should be understandable out of context
Accessibility and Hyperlinks
Link text should be understandable out of context
Bad example: click here for more information
Good example: product information
Many websites have large navigation bars.
Tabbing through these links for keyboard users can
be tedious.
A skip link allows the user to jump directly to the
Skip Links - 1
content of the page.
Give a heading element for the content an id
attribute
A hyperlink at the very top of the page links directly
to this heading element
The user does not have to tab through all the
navigation options.
Many sites use CSS to visually hide the skip links.
Screen readers will still read these links out as the
Skip Links - 2
first elements on the page.
The accesskey attribute allows us to associate a
specific key with a hyperlink.
Access Keys - 1
<a href="careers.html" accesskey="c">Careers</a>
Pressing a modifier key and the specified access
key will make the browser follow the hyperlink.
In Firefox, the modifier keys are Alt+Shift.
In IE and Chrome, the modifier key is Alt.
Access keys suffer from a number of problems
Different browsers use different modifier keys.
Conflict with browser shortcuts
Access keys often use numbers to avoid this.
Howdoes the user knowwhat the access keys
Access Keys - 2
How does the user know what the access keys
are?
Provide a list of hyperlinks and their access keys.
Use CSS to underline a specific letter in the link
text.
Indicate the access key after the hyperlinks.
Tab Order
<ul>
<li><a href="careers.html" accesskey="c">Careers</a></li>
<li><a href="news.html" accesskey="n">News</a></li>
<li><a href="about.html" accesskey="a" tabindex="10">About</a></li>
<li><a href="contact.html" accesskey="u">Contact Us</a></li>
</ul>
The tabindex attribute can be used to override the
default tabbing order in a browser.
The tabindex attribute also has problems.
Can be confusing for user if their tabbing jumps
them in an unexpected order.
Users with mobile devices often experience similar
problems as disabled users.
E.g. navigating through the keypad
Skip links can be useful
Mobile Devices and Hyperlinks
p
Use of access keys is often recommended for sites
designed for mobile users.
Using numbers
Used consistently can make the site easier to use
References
Chisholm, W. & May, M. (2008). Universal Design
for Web Applications: Web Applications That
Reach Everyone. O'Reilly Media.
Lawson, B & Sharp, R. (2010). Introducing HTML5.
Pearson.
Niederst, J . (2006). Web Design in a Nutshell: A
Desktop Quick Reference. O'Reilly Media.
Good link names, bad link names
Link together all the examples so far
In page links in the CV
Link to favourite websites in CV example
Practical
Link to favourite websites in CV example
Skip links find sites that use them; government
sites
Topic 4 Hyperlinks
Any Questions?

DDW Topic 4

Uploaded by

Copyright:

Available Formats

DDW Topic 4

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

DDW Topic 4

Uploaded by

Copyright:

Available Formats

Topic 4 Hyperlinks Designing and Developing a Website

V1.0 Visuals Handout Page 1

You might also like