Hyperlinks

• our pages that are just to look at and read
• the Web is more than text to read
• the power of the Web is the ability to link from one document to another
• called a hypertext link or hyperlink
• the link is associated with text or an image in the document - a "hot spot"
• when the link is clicked (or otherwise activated), the browser carries out an action
• very commonly the action is to fetch another web page
• the browser must be given the URL of the linked page

Anchors

• the HTMl element that makes a hyperlink is called an anchor
• it "anchors" a URL to a part of the page
• The format of an anchor is:
  

      <a href="URL">content that the URL is anchored to</a>
  

• "href" stands for "Hypertext Reference"

Example

• In the anchor
  

      <a href="http://cs.hood.edu/index.php">Computer Science Department!</a>
  
  

• the URL is "http://cs.hood.edu/index.php"
• the anchored text is "Computer Science Department!"
• the page will show "Computer Science Department!"

Absolute URLS

• an absolute or full URL is one which provides all the information needed to identify the location of the document.
• a absolute URL must include the scheme (http:), host name or IP address, and the location of the document on the host
• "http://cs.hood.edu/people/dong.shtml" is a absolute URL
• "cs.hood.edu/people/dong.shtml" is NOT a complete URL because it does not have a scheme (the http:)
• if the href part of a hyperlink is a absolute URL, the browser can use it to request the document
• if you type a absolute URL into the location/address box in the browser window, the browser will fetch it
• Note: with new versions of browsers, if you omit the scheme in the location/address box, the browser will assume that you mean http:

Relative URLS

• if a URL doesnot begin with http://, it is called a relative URL
• location of the new document is in relation to the document containing the link
• The browser adds that location in front of the relative URL to make a full URL

Folders (Directories) and URLs

        <a href="services/consult.html">
          Consulting services we offer
        </a>

        <a href="../index.html">
          Back to HOME PAGE
        </a>

Full vs relative URLs

• When must you use full URLs?
  • when the linked page is on a different host server than the one containing the link
• When can you use a relative URL?
  • the linked page is on the same server and you know where the page is in relation to the original
• Which is preferable?
• relative URLs are usually the easiest to write
• but if there are a lot of nested directories, keeping track of the .. levels can get complicated.

Portability

• using relative URLs also makes a web site portable
• it could be moved from one host server to another without having to rewrite all the links
• Example: suppose page1.html and page2.html are in the same directory on wyrd.hood.edu
• if there is a link from page1.html to page2.html
  • it could be relative - href="page2.html"
  • it could be complete - href="http://wyrd.hood.edu/page2.html"
• if the site is moved to a different server
  • the first version will work right away
  • the second one will have to be rewritten

Another Example

URLs for links from within in the index.html page from index.html to about.html <a href="about.html">About Us</a> from index.html to tapenade.html <a href="recipes/tapenade.html">Tapenade recipe</a> from index.html to linguine.html <a href="__________________________">Linguinirecipe</a> More URLs about.html back to index.html <a href="index.html">Home</a> tapenade.html to index.html <a href="../index.html">Home</a> couscous.html to tapenade.html <a href="__________________________">Tapenade Recipe</a> couscous.html to index.html <a href="__________________________">Home</a>

Targets within a page

• when the browser displays a document, it positions the top of the page in the window
• sometimes you want to jump directly to a specific spot further down the page
• the user won't have to scroll down
• such a spot is called a target
• the link to the target can be in the same page, like the ones at the top of the course syllabus

The ID attribute

• the target spot must be identified - marked as so it can be referred to
• it must be an HTML element - a tag
• the tag must have an attribute named id - id="target_name"
• the value of the id must begin with a letter and may include letters, digits (0-9), hyphens (-), underscores (_), colons (:), and periods (.). It may not use any other characters.
• it should not contain spaces or other punctuation marks other than those four (- _ : . )
• id values are case sensitive - values with different capitalization are not the same.
• the tag marking the objectives section is
  

     <h2 id="goals">Objectives</h2>

• most HTML elements can have an id attribute
• Each id value may be used only one within a document
• there can be many ids in a document as long as they are all different

The fragment part of a URL

• is at the very end of a URL
• begins with the # symbol
• designates an identified target element within the linked document
• tells the browser to position the page so that the target is at the top of the window
• the fragment name must be exactly the same as the id, including case

Example, part 1

In this example, the targets are in the same document as the links.

• the document is lesson03_example1.html
• the first link is

  <a href="lesson03_example1.html#middle">Jump to middle of this page</a>

• the first target in the page is

  <h2 id="middle">Middle of example page 1.</h2>

• the second link is

  <a href="lesson03_example1.html#bottom">Jump to bottom of this page</a>

• the second target in the page is

  <h2 id="bottom">Bottom of example page 1.</h2>

Link to complete example 1 page illustrating targets in the same page.

• be sure to view the source code.
• notice that the id does NOT have the # symbol, only the URL does
• notice that for the second link, the target (the end of the page) is at the bottom of the window, not the top. There is no more page beyond that point.

Example continued

In this example, the targets are in a different document from the links.

• the document with the links is lesson03_example2.html
• the targets are in lesson03_example1.html
• the first link is

  <a href="lesson03_example1.html#middle">Jump to middle of example page 1</a>

• the second link is

  <a href="lesson03_example1.html#bottom">Jump to bottom of example page 1</a>

• the targets in lesson03_example1.html are the same ones used before

Link to complete example 2 page illustrating targets in a different page.

• again, be sure to view the source code - for both pages.
• notice that the id does NOT have the # symbol, only the URL does
• notice that for the second link, the target (the end of the page) is at the bottom of the window, not the top. There is no more page beyond that point.

Anchors and Styles

• anchor elements have style properties, such as color, just as other elements do.
• for example, the rule a {color: lime} will cause all links to be lime green.
• the example rule will be used for all anchor text
• it won't distinguish visited and unvisited links

Example

For example, a page might use the following style rule:

  <style type="text/css">
      a {color: lime}
  </style">

Link to complete example 6 page illustrating styling links.

Pseudo-elements and pseudo-classes

• Style is normally attached to an element based on its type and relation to other elements in the document.
• Pseudo-elements are based on relationships beyond those in the document tree, such as the first letter or first line of an element.
• Pseudo-classes classify elements on characteristics other than their type, attributes or content, such as whether a link has been visited or not.
• Neither pseudo-elements nor pseudo-classes actually appear in the document source code or document tree. They are abstract concepts.

Pseudo-classes

Pseudo-classes are written after the element using a colon between the element symbol and the pseudo-class name. The following table lists most of them.

Example of pseudo-classes

    <style type="text/css">
      a:link { color: red }
      a:visited { color: green }
      a:hover { color: yellow }
      a:active { color: blue }
     </style>

• Unvisited links will be red text
• Visited links will be green.
• When the mouse hovers over a link it will turn yellow.
• If the mouse button is pressed over a link but not released it will be blue.

Another Example

For example, a page might use the following style rules:

  <style type="text/css">
    a {color: lime}
    a:link {color: #ff6600}
    a:visited {color: #0066ff}
    a:hover {color: red}
  </style">

Link to complete example page illustrating pseudo-classes.

Guidelines

• Use relative URLs for links within a site (pages on the same server).
• Use styles to make sure links are clearly identified.
• If you want to give an element special styling different from the rest, use an ID.
• Do not use spaces or other unallowed punctuation in ID names.
• Always include comments that provide assignment information, page author (you), and date.