Format

Links are what make the web the web. With a simple mouse click they let you transfer to another page anywhere on the World Wide Web.

The format of a link looks like this:

<a href="http://wikipedia.org">Wikipedia</a>

or this:

<a href="index.html">Go Home</a>

Let's look at each part of this statement:

Attributes

Attributes, as you may recall from the section with that title in Lesson 1, are modifiers of html elements with values assigned to names using name="value" inside the open tag of an element. The href attribute is required for hyperlink elements.

Hypertext

The attribute in the hyperlink tag, href, stands for hypertext reference. It is the href attribute that tells the browser which location to load when the hyperlink (or as it's more commonly called, link) element is clicked. Links are what drives the World Wide Web and makes it so popular.

Location

The value of an href attribute is usually a web address, which describes the location of another web page. Web addresses are also called URLs. There are two ways to specify the location of a hypertext link.

Absolute Location

An absolute location uses the entire URL, like:

http://openbookproject.net/tutorials/getdown/html/index.html

Not only is this tedious to type, but using absolute locations makes it difficult to move your site, which brings us to...

Relative Location

Let's say you want to go from

http://openbookproject.net/tutorials/getdown/html/lesson6.html

to

http://openbookproject.net/tutorials/getdown/html/lesson7.html

From inside the lesson6.html file, the link only needs to be written as:

<a href="lesson7.html">Lesson 7</a>

lesson6.html and lesson7.html are in the same directory, and so have the same relative location.

Links Within A Document

Hyperlinks can also link to places within a document - either the same document or a different one. For example, clicking this link will take you the format section at the beginning of this lesson.

Two attributes were combined to make that work. First, an id="format" attribute was added to the Format h2 element at the beginning of the lesson. Second, a link element with href="#format" was put around the the word this, making it a local link.

The link to the Attributes section of Lesson 1 above is another example of a link to a location within a document. In this case the link looks like this:

<a href="lesson1.html#attributes">Lesson 1</a>

and is combined with the element

<h2 id="attributes">Attributes</h2>

in Lesson 1 to make the link.

Exercises:

1. Copy minimal_page.html to favorite.html. Put My Favorite Web Sites in the title and a top level heading. Create an ordered list with absolute links to your top 10 favorite websites. Your completed favorite.html might should look something like this.

2. Project: Putting the Pieces Together

   Edit the gdw.html file that you created in Lesson 2, making the following changes:

   • Change Block-level Elements, Inline Elements, Object Elements, and Special Characters from third level headings to list items. Put them in an unordered list. Make Block-level Elements link to the file block.html that you created in lesson 3. Inline Elements should link to inline.html, Object Elements to object.html, and Special Characters to special.html.
   • Change Ordered, Unordered, and Description from third level headings to list items. Put them in an unordered list. Link Ordered to the file ordered.html that you created in lesson 4. Link the other two labels to their corresponding files as well.
   • Create another unordered list under the Tables heading with two items: Decimal, Binary, Octal, and Hex, and My Table. Link the first one to the decbinocthex.html file you made in lesson 5, and the second one to mytable.html.
   • Remove the two third level headings under Links (Absolute and Relative) and in their place create an unordered list with a single list item. Put the text My Favorite Websites in this list item and link it to the favorite.html file you created in the previous exercise.
   • Finally add an unordered list under the Images heading with Gallery I and Gallery II as the text in these list items. You will make these links in the next lesson.
3. When finished, your gdw.html page should look something like this, and all the links should load the correct pages when clicked.