Hyperlinks

This lesson is part of the Web Programming 1 Course.

In order to add a hyperlink to a web page, you use an a element. The 'a' stands for 'anchor', which seems a little outdated now because nobody calls them anchors anymore. When the page is viewed in the browser, the text in between the opening and closing a tags will be underlined by default. This makes it easy to recognize it as a link that can be clicked on.

Every a element must include an href attribute, which specifies the page or file it links to. The following code creates a hyperlink to Google's home page.

<a href="http://www.google.com">Click here to go to Google</a>

When creating links to other websites (rather than to pages on your own website), you may want the link to open in a new browser tab. To do this, add a target attribute, and set it's value to _blank, like so:

<a href="http://www.google.com" target="_blank">Click here to go to Google</a>

Absolute Hyperlinks

When linking to a page that is on a different website, you must set the href attribute to an 'absolute' URL. An absolute URL begins with http:// or https://, after that comes a domain name, such as www.google.com (the domain name can also be called the host or server name).

Relative Hyperlinks

When linking to a page that is on the same website, it's common to use a relative link. These links are call 'relative' because you must set them to a path that is relative to the page that has the link in it. The folder that contains page in which you are adding the hyper link is the starting point for the path.

A path is a series of steps that go from the starting point to the destination, and each step is separated by a forward slash (/).

If the an a element looks like this:

<a href="animals/cats/siamese.html">Siamese Cats</a>

The value of the href attribute (the path) indicates folder that contains the current page (the one that includes the hyper) also contains a folder named animals. And that within the animals folder is a folder named cats, and within that folder is a file named siamese.html.

A path that begins with ../ indicates that the first step in the path is to move up to the parent folder.

By the way, understanding file paths, and how to link from one file to another is very important for a programmer to understand. Failing to correctly link a file is a common mistake for programmers an can result in bugs that can cause an app to crash.

In-Page Links

You can create hyperlinks that point to specific places within a web page. This comes in handy if a web page has a lot of content on it.

In order to mark an element on a page so that you can link to it, you can add an id attribute to it. Consider a web page that may be broken up into sections, and you would like to link to the second section within the page. You might start each section off with an heading like this:

<h3 id="s2">Section 2</h3>

Note that an 'id' attribute has been added to the h3 element, and that it's value is set to 's2'. Also note that 's2' is arbitrary (I made it up), you can make up your own ids for elements, so we could have just as easily used 'sect2' instead. If you wanted to put a table of contents at the top of the page that links to each section, the link to section 2 could look like this:

<a href="#s2">Jump to Section 2</a>

Notice that the href attribute starts with a # and then specifies the id (in this case s2) of the element that marks the beginning of section 2. The use of the # is part of the rules of the syntax for linking to an element by it's id.

Class Activity

Download the hobbies.zip file. Then extract it and put the hobbies folder inside your web-programming folder (make the hobbies folder a child of the web-programming folder).

We can experiment with linking to various pages.