1 / 19

Navigating the Web: Understanding Links and Web Addresses

This lesson explores the fundamentals of web addresses and how to navigate through links effectively on the internet. Learn about clickable items, link states, pseudo-classes, and more.

xenos
Télécharger la présentation

Navigating the Web: Understanding Links and Web Addresses

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

  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 <a href=“address” >Clickable item</a> http://www.gccaz.edu is a valid web address www.gccaz.eduis a NOT a valid web address WHY?

  10. Another page in same location. <a href=“page2.html” />my second page</a> A page that is external to the page. <a href=“http://www.cnn.com” />news</a> Click on an image. <a href=“bgdog.jpg” ><img src=“dog.jpg></a>

  11. A different spot in the page – jump links <a href=“#taxinfo” />taxes</a> Need to create a location to jump to (also called a target) <h2 id=“taxinfo”> 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>

  12. 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 (literallyduring the time the users are clicking it.) ALWAYS SPECIFY IN THIS ORDER.

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

  19. Time flies, but you are the pilot.

More Related