Need to define two things:
› The destination
› Something to click on to get there
 Tag is <a href=…>click here</a>
 Can be text, special character or
image (next week)
 Can change the text format

Always link to an anchor point

Implicit anchor point at top of page
› Anchor referenced as null

Adding other anchor points
› Insert named anchor point
› id=“anchor” on any tag

To point to an anchor point on SAME page
<a href=“#anchor”>link text</a>
<a href=“#”>top of page</a>

To point to an anchor point on SAME page
<a href=“#anchor”>link text</a>
<a href=“#”>top of page</a>

In order to access anchor point on
another page
<a href=“Page#AnchorPoint”>Link text</a>
Can use any formatting that you want
 Links have states (visited or not, hovering)
 Can change attributes for all states with
a{
Property: value;
}

Characteristics of tags that can have
their own attributes
 Not reflected in HTML
 In CSS:

tag:pseudo-element
Link states
a:link -- a normal, unvisited link
a:visited -- a link the user has visited
a:hover -- a link when the user mouses over it
a:active -- a link the moment it is clicked
Note: CSS order important
hover must come after link & visited
active must come after hover
LoVe HAte
a:link {
color: #FC5BD4;
}
a:visited {
color: black;
}

Long pages
› Avoid too much scrolling
› Links to subsections
› Link to top

Lots of topics
› Use a “table of contents” of links

Use full url
<a href=“http://www.unc.edu">Link text</a>

To force open in a new tab (window)
<a href=“http://www.unc.edu” target="_blank">Link text</a>
GOOD PRACTICE
REQUIRED IN THIS CLASS

Header, includes
› h1 title
› Nav(igation)
Section or div for main body
 Footer


Paragraph in each section may want to
look different
› Smaller in header or footer

Lists
› No bullets
› In a line
› Different spacing

Name the context in the css by using a
space
header p {
text-align: center;
}
footer p {
text-align: right;
}