Unit F Inserting and Working with Links

How to get there from here.

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

Some Important Terms Hyperlink - also called a link Target document - what is being linked to (the destination). a element - tag that encloses hyperlink Specified by using <a></a> tag pair href attribute - used to specify target document

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

Understand URLs Uniform Resource Locator (URL) also known as a web address - format for specifying how and where to find a resource on internet Scheme (http or https) Server name Path http://web.gccaz.edu/~timgo00001/cis133/f-urls.html

Structure of URL and common values of href attribute

Nav bar a set of links for moving between pages in a website (and even to external links.)  Horizontal nav bar </header> <nav class="sitenavigation"> <p><a href="index.html">Home</a></p> <p><a href="hours.html">Hours</a></p> <p><a href="https://goo.gl/maps/qH0x8" target="_blank">Location</a></p> <p><a href="tipsheet.pdf">Tips</a></p> </nav> <article>

Vertical nav bar </header> <nav class="sitenavigation"> <p><a href="index.html">Home</a></p> <p><a href="started.html">Getting Started</a></p> <p><a href="schedule.html">Schedules</a></p> <p><a href="https://goo.gl/maps/2z1wg" target="_blank">Field Location</a></p> </nav> <article>

Relative link: path and filename needed to locate the target document from the current web page The value of the href attribute only includes relative location information, not server name or scheme Often used in a nav bar

Absolute link: full and complete address for the target document Value for the href attribute is a complete URL of the target web page Necessary when creating a link to another website, hosted on another server

Valid Web Addresses Valid Invalid http://web.gccaz.edu web.gccaz.edu project q.html Valid Invalid

A page in the same folder. <a href="page2 A page in the same folder. <a href="page2.html">my second page</a> A page in a subfolder named review. <a href="review/page3.html">my third page</a> A page that is an external address. <a href="http://www.cnn.com">news</a> <a href="https://acme.com/staff/fj.html">Fred Jones</a>

Click on an image. <a href="happy.html"><img src="h-dog.jpg"></a> <a href="lg-dog.jpg"><img src="sm-dog.jpg"></a>

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>

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

Change CSS display type Nav bar is usually displayed horizontally or vertically Change each link to a block-level element to style it with padding border margins

Change an element’s display type by using the display property Commonly used values for the display property

<nav class="sitenavigation"> <p><a href="index.html">Home</a></p> <p><a href="hours.html">Hours</a></p> <p><a href="https://goo.gl/maps/qH0x8" target="_blank">Location</a></p> <p><a href="tipsheet.pdf">Tips</a></p> </nav>

<nav class="sitenavigation"> <p><a href="index.html">Home</a></p> <p><a href="hours.html">Hours</a></p> <p><a href="https://goo.gl/maps/qH0x8" target="_blank">Location</a></p> <p><a href="tipsheet.pdf">Tips</a></p> </nav>

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;

Link States "LoVe HAte" a:link a:visited a: hover a:active 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.

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

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>

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.

Rollover effect - mouse interaction occurring when the user's mouse pointer hovers over a link but does not click on it Code for a:hover style rule

A few causes of difficulties Invalid address. Misspelling the address. Missing end quotes around address. Missing > between address and clickable item. Missing end </a> Whenever a lot more is underlined than should be, the ending <a> is probably missing Missing clickable item.