1. Unit F
Inserting and Working with Links

2. How to get there from here.

3. Library

4. Call numbers

5. Book Look Up – Old Way

6. Book Look Up - Online

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

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

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

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

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

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

13. Structure of URL and common values of href attribute

14. 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=" target="_blank">Location</a></p>
<p><a href="tipsheet.pdf">Tips</a></p>
</nav>
<article>

15. 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=" target="_blank">Field Location</a></p>
</nav>
<article>

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

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

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

19. 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=" <a href=" Jones</a>

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

21. Open the new item in a different window (or tab).
<a href="p3.html" target="_blank">cat</a>
Open an composition window.
<a me</a>

22. 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">

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

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

26. <nav class="sitenavigation">
<p><a href="index.html">Home</a></p>
<p><a href="hours.html">Hours</a></p>
<p><a href=" target="_blank">Location</a></p>
<p><a href="tipsheet.pdf">Tips</a></p>
</nav>

27. <nav class="sitenavigation">
<p><a href="index.html">Home</a></p>
<p><a href="hours.html">Hours</a></p>
<p><a href=" target="_blank">Location</a></p>
<p><a href="tipsheet.pdf">Tips</a></p>
</nav>

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

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

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

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

33. 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;

34. 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=" />Dachshund
Info</a>
| Dog Gone |
</h2>
<div>

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

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

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