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

Library

Call numbers

Book Look Up – Old Way

Book Look Up - Online

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

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

Clickable item Clickable item

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 is a valid web address is a NOT a valid web address WHY?

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

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 composition window. me

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.

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.

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 styles a:link { color: red; } a:visited { color: green; } a:hover { color: orange; } a:active { color: silver; }

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

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. | Outside | Inside | Dachshund Info | Dog Gone |