How to get there from here.

Lesson 5 – Unit E

Library

Call numbers

Book Look Up – Old Way

Book Look Up - Online

Web Addressis like a call number to locate a page.

The href tag has two major partsweb address what to click on

<a href=“address” >Clickable item</a>

<a href=“address” >Clickable item</a>

Address can be: Clickable item can be:

file name folder(s)/file name

web address location within a page special item

text image (or media) text and image

http://www.gccaz.edu is a valid web addresswww.gccaz.edu is a NOT a valid web address WHY?

Another page in same location.<a href=“page2.html” />my second page</a>

A page that is external to the page.<a href=“http://www.cnn.com” />news</a>

Click on an image.<a href=“bgdog.jpg” ><img src=“dog.jpg></a>

A different spot in the page – jump links<a href=“#taxinfo” />taxes</a>Need to create a location to jump to (also called a target) <h2 id=“taxinfo”>

Open the new item in a different window (or tab).<a href=“p3.html” target=“_blank” />cat</a>

Open an e-mail composition window.<a href=“mailto:alex@acme.com” />email me</a>

Link States "LoVe HAte"a:link

link that has not been visited

a:visitedlink that has been visited

a: hoverlink that mouse is currently pointing over

a:activelink that is being clicked (literally during the time the users are clicking it.)

ALWAYS SPECIFY IN THIS ORDER.

Focus "LoVe Fears HAte"Applies while the link has focus

—for example while a keyboard user’s cursor is on that link.

Note: IE does not currently support the focus state, and just uses active in place of focus.

Traditionally, text links were blue if not visited and purple if visited, and there is still reason to believe that these are the most effective colors to use, although, again, with the increasingly widespread use of CSS, this is becoming less commonplace and the average user no longer assumes that links must be blue or purple.

Step 1 – Add link stylesa:link { color: red; }a:visited { color: green; }a:hover { color: orange; }a:active { color: silver; }

PSEUDO CLASSCategorization of web page elements.Based on a relationship or condition of the element at a given moment, rather than a static property value.

Allows you to style content dynamically.

selector:pseudo-class {property:value;}

http://www.w3schools.com/css/css_pseudo_classes.asp

Step 2 - Add pseudo class#menu a:link { color: gold; }#menu a:visited { color: cadetblue; }#menu a:hover { color: lime; }#menu a:active { color: tomato; }

Step 3 - Add div to menu links and name it menu.<div id="menu"><h2 id="dog">| <a href="r1.html" />Outside</a> | <a href="r2.html" />Inside</a> | <a href="http://en.wikipedia.org/wiki/Dachshund" />Dachshund Info</a> | Dog Gone |</h2><div>