Unit F

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 Addressis like a call number to locate a page.

8. The href tag has two major partsweb 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. 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 <a href="address">Clickable item</a> http://www.gccaz.edu is a valid web address www.gccaz.edu 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 http://web.gccaz.edu/~timgo00001/cis133/f-urls.html

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="https://goo.gl/maps/qH0x8" 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="https://goo.gl/maps/2z1wg" 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 Invalid http://web.gccaz.edu web.gccaz.edu project q.html Valid Web Addresses

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

20. Click on an image. <a href="happy.html"><img src="h-dog.jpg"></a> <a href="lg-dog.jpg"><imgsrc="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 e-mail composition window. <a href="mailto:alex@acme.com">email 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="https://goo.gl/maps/qH0x8" 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="https://goo.gl/maps/qH0x8" 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 "LoVeHAte" 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.

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;} http://www.w3schools.com/css/css_pseudo_classes.asp

33. Step 2 - Add pseudo class What does #menu refer to? The element (for example it could be a p or div) with that id i.e. <div id="menu" So what would #menu a:link refer to? The unvisited links within the element with that id.

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

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

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. Debugging HREFs • 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.