HyperText

1
HyperText

• Week 6 - Presentation 2
• Veronica Noone

2
Objectives

• Hypertext?
• The Anchor Tag
• href attribute
• Responsible Links
• Tab Index
• Styling Links

3
Hypertext?

• Text that is not constrained to be linear.
• Accomplished on the web via hyperlinks (links).
• What tag do we use to create links?

4
The Anchor Tag

• Came from named anchors (links to the same page)
• href attribute
• Hypertext reference
• Can take

lta hrefanotherpage.htmlgtA simple Linklt/agt
5
href attribute

• http//domainname.com/folder/file.html
• myfolder/anotherfile.html
• ../../upperFile.html
• samefolderfile.html
• filewithanchor.htmlsect1
• justanchor

6
Try It!

• Take a copy of your template file
• Save it as page1.html
• Save it as page2.html
• Create a link in page1 that links to page2 and
  vice versa
• Add a link to monster.com from page1.

7
Responsible Links

• Links make the web go round
• Accessibility and usability considerations
• Does anyone tab?

8
Tab Index

• It is possible to navigate the web without a
  mouse
• Well it should be!
• Sites have a natural hierarchy but sometimes its
  important to set the order in which your links
  are tabbed

lta hrefanotherpage.html tabindex1gtA simple
Linklt/agt
9
Access Keys

• Keyboard Shortcuts
• Has problems??

lta hrefanotherpage.html accesskeywgtA simple
Linklt/agt
10
Title Attribute

• SHOULD use
• May provide tooltip depending on browser
• Good to use when text of link doesnt describe
  the link well enough.

lta hrefanotherpage.html titleLaunch another
pagegtA simple Linklt/agt
11
Styling Links

• Links (of course) can be styled with CSS
• Default style?
• States?
• Lets take a look.