HTML5 and CSS3 Illustrated

Unit E: Inserting and Working with Links

Objectives

Understand links

Create relative links

Create absolute links

Style links with CSS pseudo-classes

HTML 5 and CSS 3 – Illustrated Complete 2

Objectives (continued)

Open links in new windows or tabs

Link to anchors

Create a link to a document

Increase navigational accessibility

HTML 5 and CSS 3 – Illustrated Complete 3

Understanding Links

Hypertext: links in and between text-

only documents

Currently can be created on any visible

Web page element

Present to users options for more

information

a element: encloses text that will serve

as a link

Specified by using <a></a> tag pair

HTML 5 and CSS 3 – Illustrated Complete 4

Understanding Links

(continued)

href attribute: used to specify target

document

User agent enables user to interact

with link element to open linked

document

Colors indicate links and user

interactions with links

Color convention uncommon due to CSS

customization

HTML 5 and CSS 3 – Illustrated Complete 5

Understanding Links

(continued)

Navigation bar: set of links for moving

between pages in Web site

Possibly more than one per Web page

Uniform Resource Identifier (URI):

format for specifying how and where to

find a resource on internet

Scheme

Server name

Path

HTML 5 and CSS 3 – Illustrated Complete 6

Understanding Links

(continued)

Structure of URI and common values

of href attribute

HTML 5 and CSS 3 – Illustrated Complete 7

Creating Relative Links

Relative link: path and filename

information needed to locate the target

document from the current Web page

Suitable for use in a nav bar

• In nav bar, often separated by pipe (|) symbol

The value of the href attribute only

includes relative location information, not

server name or scheme

HTML 5 and CSS 3 – Illustrated Complete 8

Creating Relative Links

(continued)

HTML code with relative links

HTML 5 and CSS 3 – Illustrated Complete 9

Creating Absolute Links

Absolute link: full and complete

address for the target document

Value for the href attribute is a complete

URI of the target Web page

Necessary when creating a link to

another Web site, hosted on another

server

HTML 5 and CSS 3 – Illustrated Complete 10

Creating Absolute Links

(continued)

HTML code with absolute links

HTML 5 and CSS 3 – Illustrated Complete 11

Styling Links with

CSS Pseudo-Classes

Links can be in any of four different

states: link, active, hover, and visited

Pseudo-class: categorization of Web

page element based on relationship or

condition at a given moment

Used to format links depending on the

state they are in

Applies to any link in the specified state

which is within the selected element(s)

HTML 5 and CSS 3 – Illustrated Complete 12

Styling Links with CSS

Pseudo-Classes (continued)

Rollover effect: mouse interaction

occurring when the user's mouse

pointer hovers over a link but does not

click on it

a:hover style rule

HTML 5 and CSS 3 – Illustrated Complete 13

Styling Links with CSS

Pseudo-Classes (continued)

HTML 5 and CSS 3 – Illustrated Complete 14

CSS pseudo-classes and code

Opening Links in

New Windows or Tabs

By default, target Web page opens in

the same window and tab as source

page

Prevents opening too many windows

In certain situations, you want to leave

current page open while opening

another page

Use target attribute of a element

Set value to be “_blank”

HTML 5 and CSS 3 – Illustrated Complete 15

Opening Links in New Windows

or Tabs (continued)

Code including target attribute

HTML 5 and CSS 3 – Illustrated Complete 16

Linking to Anchors

Anchors: named locations within the

current document

Create links to anchors within the

current Web page

Assign unique names to elements using

the HTML id attribute

Reference within href attribute by

preceding the anchor with a pound sign

(#)

HTML 5 and CSS 3 – Illustrated Complete 17

Linking to Anchors

(continued)

HTML 5 and CSS 3 – Illustrated Complete 18

Code containing anchor values and

links to anchors

Creating a Link to a Document

Sometimes it is useful to create a link

to a document that is not a Web page

e.g., link to school brochure in PDF

Can create link to any type of

computer-readable document

Specify the document as the value of the

href attribute

HTML 5 and CSS 3 – Illustrated Complete 19

Creating a Link to a Document

(continued)

HTML 5 and CSS 3 – Illustrated Complete 20

Code for creating link to a PDF

document

Increasing Navigational

Accessibility

Nav bars sometimes present

accessibility challenges

Using screen readers

Possible solutions:

Skip link: anchor to main page content

• Allows skipping nav bar

nav element: semantic element

surrounding nav bar

• Allows screen reader to distinguish nav bar

• May need to be included as a script HTML 5 and CSS 3 – Illustrated Complete 21

Increasing Navigational

Accessibility (continued)

HTML 5 and CSS 3 – Illustrated Complete 22

Code for skip link

Summary

Hypertext provides links in and

between documents

Links are defined using the a element

href attribute specifies location of target

document

A navigation bar is a set of links for

moving between Web pages

Absolute link: complete address of

target document HTML 5 and CSS 3 – Illustrated Complete 23

Summary (continued)

Relative link: path/filename information

needed to locate target document

Pseudo-class: categorization of web

page elements based on temporary

condition

Used to format links with CSS

Target Web page can be opened in

different window or tab using target

attribute of the a element

HTML 5 and CSS 3 – Illustrated Complete 24

Summary (continued)

Anchors are links to locations in the

current Web page

Created using id attribute

id preceded by # in href value

You can create a link to any computer

readable document

To increase accessibility, provide

users a way to skip or ignore the

navigation bar HTML 5 and CSS 3 – Illustrated Complete 25