1. How to get there from here. Lesson 5 – Unit E

2. Library

3. Call numbers

4. Book Look Up – Old Way

5. Book Look Up - Online

6. Web Address is like a call number to locate a page.

7. The href tag has two major parts web address what to click on

8. Clickable item Clickable item

9. 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 address www.gccaz.edu is a NOT a valid web address WHY?

10. Another page in same location. my second page A page that is external to the page. news Click on an image.

11. A different spot in the page – jump links taxes Need to create a location to jump to (also called a target) Open the new item in a different window (or tab). cat Open an e-mail composition window. email me

12. Link States Link States "LoVe HAte" a:link link that has not been visited a:visited link that has been visited a: hover link that mouse is currently pointing over a:active link that is being clicked (literally during the time the users are clicking it.) ALWAYS SPECIFY IN THIS ORDER.

13. Focus 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.

14. 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.

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

16. PSEUDO CLASS Categorization 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

17. 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; }

18. Step 3 - Add div to menu links and name it menu. | Outside | Inside | Dachshund Info | Dog Gone |