Introduction to JavaScript

							HyperText

Week 6 - Presentation 2
Veronica Noone
     Objectives

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

 Text that is not constrained to be
  linear.
 Accomplished on the web via
  hyperlinks (links).

   What tag do we use to create links?
      The Anchor Tag

       Came from named anchors (links to
        the same page)
       href attribute
           “Hypertext reference”
           Can take…



<a href=“anotherpage.html”>A simple Link</a>
href attribute

 http://domainname.com/folder/file.html
 myfolder/anotherfile.html

 ../../upperFile.html

 samefolderfile.html

 filewithanchor.html#sect1

 #justanchor
Try It!

1.   Take a copy of your template file
2.   Save it as page1.html
3.   Save it as page2.html
4.   Create a link in page1 that links to
     page2 and vice versa
5.   Add a link to monster.com from
     page1.
Responsible Links

 Links make the web ‘go round’
 Accessibility and usability
  considerations

   Does anyone tab?
     Tab Index

        It is possible to navigate the web
         without a mouse
            Well it should be!
        Sites have a natural hierarchy but
         sometimes it’s important to set the
         order in which your links are tabbed
<a href=“anotherpage.html” tabindex=“1”>A
simple Link</a>
      Access Keys

         Keyboard Shortcuts

<a href=“anotherpage.html” accesskey=“w”>A
simple Link</a>


         Has problems??
      Title Attribute

       SHOULD use
       May provide tooltip depending on
        browser
       Good to use when text of link doesn’t
        describe the link well enough.

<a href=“anotherpage.html” title=“Launch
another page”>A simple Link</a>
Styling Links

   Links (of course) can be styled with
    CSS

   Default style?
       States?

       Let’s take a look.