HyperText - PowerPoint PPT Presentation

1 / 11
About This Presentation
Title:

HyperText

Description:

Styling Links. Hypertext? Text that is not constrained to be linear. ... Styling Links. Links (of course) can be styled with CSS. Default style? States? Let's ... – PowerPoint PPT presentation

Number of Views:65
Avg rating:3.0/5.0
Slides: 12
Provided by: CCBC3
Category:
Tags: hypertext | styled

less

Transcript and Presenter's Notes

Title: 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.
Write a Comment
User Comments (0)
About PowerShow.com