Links

Video Links

Examples from Videos

Notes

Links are the "hypertext" basis of HTML. There are actually two ways to link - to another page (which is the most common) or to another part of the current document. Links will be underlined and show up in the link color specified in the body tag. After the user has visited the page, a link to it will show up in the vlink color.

Linking to another website

The structure of a link has two parts. Links are called anchors or anchor links. Thus, the name of the tag you use for linking is actually "a". To link to another page, you use the attribute "href" and set the value to the place you're linking. Thus the first part of a link looks like this:
<a href="http://www.google.com">

Then, you need to create the text that will be the clickable link. (This could also be an image). It is surrounded by the a tag, so to finish the link above, we would do something like this:

<a href="http://www.google.com">google</a>

and on your screen, that would look like this: google

When you are linking to another website, it is important to include the http:// in front of the address. If you leave it off, the browser will think that you're looking for a file in your current directory of your web server. If you intend to link to another file of yours, here is the system.

  • If the file to which you are linking (let's call it page2.html) is in the same directory as the f ile from which you are linking, you can put the file name after the href.

    <a href="page2.html">To Page 2</a>

  • If page2.html is one step above the file from which you are linking from in the directory structure, you can use ../ to indicate to go up one level

    <a href="../page2.html">To Page 2</a>

  • If page2.html is in a subdirectory (call it sub) of the directory that contains the file from which you are linking, you include the subdirectory name in the href:
    <a href="sub/page2.html">To Page 2</a>

    You can combine these traits, so if you had a directory structure like this:

    You could link from page1.html to page2.html like this
    <a href="../hw2/page2.html">To Page 2</a>

Normally, when a user clicks on a link, the new page loads in place of the one you were viewing. If you want to keep your page in the browser, you can make the page pop open in a new window by adding the target="_blank" attribute. Note that there is an underscore before the word blank.

Linking to another place in your page

If you have a long page, and you'd like to link to somewhere else in that page, you can do that with the a tag as well. First, you need to put markers in the places to which you want to link. Markers look like this:

<a name=top">

Browsers will sometimes be confused by these markers if you don't have the </a> tag, so it's good practice to put that right after the opening tag, without any text between the start and end tags.

I have placed this marker at the top of this document. To link to one of these places in your document, you use a regular href attribute, but instead of including a URL as the value, you use a # sign plus the name of the place you are linking to: <a href=#top>Go to the top</a>

Here is an example which will link to the top.

Linking to send email

The third way that we can use links is to allow people to email us through the web. To send mail, you set the href equal to mailto:youremailaddress@example.com. So, if you wanted to email the President, you can use this code: <a href="mailto:president@whitehouse.gov">Mail the President!</a>
When someone clicks on this link, the browser's mail program will pop open a window send mail. Try It!.