Week 6 - Presentation 2 Veronica Noone 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! Take a copy of your template file Save it as page1.html Create a link in page1 that links to page2 and vice versa 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 Has problems?? <a href=“anotherpage.html” accesskey=“w”>A simple Link</a>

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.