CSS/HTML Links

[b]Links[/b]

Without hyperlinks, the Web wouldn’t be “the Web”. This section explains how to create links to
other websites (external links) and links within your own website (internal links).
The a Element
The anchor element, a, creates links.

1. <p>
2. A link to <a href="http://www.google.com/">Google's
3. home page</a>.
4. </p>
5. <p>
6. A link to
7. <a href="http://www.google.com/help/basics.html">a
8. page within Google</a>.
9. </p>

The syntax is straightforward: the href attribute indicates where the link should go, and the text
between the <a> and </a> tags becomes the highlighted link text.

[b]Anchor Titles[/b]

The optional title attribute allows you to provide a little extra information about the link. Some
older browsers ignore this attribute, but most modern browsers produce a little floating “tooltip” if
you hover your mouse over the link.

1. Can physics be
2. <a href="http://www.dctech.com/physics/humor.php"
3. title="The most hilarious collection of physics
4. humor anywhere!">funny</a>?
5. Is that a rhetorical question?

You can use the title attribute to indicate where the link is going or provide some other useful
information. It’s nifty, but it doesn’t hurt to leave it out, either.

[b]Components of the URL[/b]

To construct links to other websites, we need to understand the structure of the URL. Let’s take a
closer look at the URL “http://www.google.com/help/basics.html”:

• The protocol (“http://”): Specifies that we would like to use the HTTP (HyperText
Transport) protocol. This is the standard protocol for retrieving web pages, although there
are others, such as FTP (File Transfer Protocol) and HTTPS (Secure HyperText Transport
Protocol). Most of the time, though, you’ll be using “http://” to retrieve pages from external
sites.
You may specify the protocol in upper case, lower case, or anything in between, but most
people use all lower case.

• The website (“www.google.com”): This specifies that we would like to access a page
from google.com. More technically, it means:

1. Go to the top-level domain “com” (a collection of many millions of websites).
2. Within “com”, find the the domain name “google”.
3. Within “google”, find the the sub-domain named “www”.

Finding the website is similar to finding a mailing address. The address “1600 Pennsylvania
Avenue NW, Washington, DC 20500” means: go to the zip code “20500”; within “20500”,
find the city “Washington D.C.”; within “Washington, DC”, find the building “1600
Pennsylvania Avenue NW”.
As with the protocol above, you may use any case you like for specifying the website,
although most people use all lower case.

• The file path (“/help/basics.html”): This specifies that we would like to access the
file basics.html, which is inside the directory help/.
Unlike the other components, the filepath can be case-sensitive. Depending on the website
you’re visiting, the file Basics.html might be different from the file basics.html.

Wait, Which File Was That Again?

This is a little odd — in our first example, “http://www.google.com/”, we didn’t specify a file or a
directory. So what did we ask for, exactly?

First, it turns out the directory is specified. The single forward slash (“/”) represents the “root” or
“top-level” directory of the website. We’re asking Google to give us a file from the top directory of
its website.

Okay, but which file are we asking for? We didn’t specify the name of the file explicitly, we just
asked for a directory. This means means we’re asking Google, “Give us the default file for that
directory, if you have one.” As it turns out, Google is going to give us a file named “index.html”,
but the exact name could be anything. It’s up to Google.

[b]Internal links[/b]

Internal links are similar to external links except that you can leave off the protocol and website
name. You only need to specify the file path.

File paths for internal links can be absolute or relative. Absolute links always begin with a forward
slash. They specify a path that starts at the root directory of your web server. Relative links never
begin with a forward slash. They specify a path that is relative to the page that the link is on.

Examples of absolute links:

• href="/": Go to the web root directory and get the default file. (The home page of
goer.org.)

• href="/HTML/: Go to the web root directory, then the HTML directory, and get the default
file. (The first page of this tutorial.)

• href="/HTML/basic/links/index.html": Go to the web root directory, then the
HTML directory, then the basic directory, then the links directory, and get the file
index.html (This page.)
Examples of relative links (relative to this page,
http://www.goer.org/HTML/basic/links/index.html):

• href="index.html": Get the index.html file that is in the current directory. (This
page.)

• href="../": Go up one directory from the current directory and get the default file. (The
first page of Chapter 2.)

• href="../../introduction/": Go up two directories from the current directory,
enter the introduction directory, and get the default file. (The first page of Chapter 1.)
As the examples demonstrate, URLs can vary in complexity while still pointing to the same
location.

For pages that are “near” the current page, relative links are often simpler. Relative links also work
better if you are working with files on your desktop, as opposed to a real websever.

Because absolute links are the same no matter where you are on the website, they’re good for
standard navigation links, header and footer links. However, absolute links don’t work as well if
you are just messing around with files on your desktop. On a webserver, an absolute link such as
/HTML/index.html starts with the webserver’s root directory. But on your local desktop, there
is no “webserver root directory”, and so your computer attempts to follow the filepath
/HTML/index.html from the root directory of your hard drive. In general, this will fail.

[b]Linking Within Pages[/b]

We can link to web pages in external websites and internal websites. What about linking to a
particular location in a page?

All elements provide this capability through the id attribute. Once you’ve assigned an id to the
element, you can link directly to the location on the page where the element appears:

1. <h2 id="fruitbat_migratory">
2. Migratory Patterns of the Fruit Bat
3. </h2>
4. ...
5. ...
6. ...
7. <p>
8. <a href="#fruitbat_migratory">link to 'Migratory Patterns of the Fruit Bat'</a>.
9. </p>
10....

The id’s value is fruitbat_migratory. Further down the page, we have a link to this ID,
specified by href="#fruitbat_migratory".

You can combine named anchors with longer URLs: for example,
http://www.goer.org/HTML/basic/links/#parts.

The pound sign in the URL makes the link point to the named anchor. If we had accidentally written
href="parts", that would have been a relative link to the directory named “parts”.

[b]Caution
Never give two elements the same ID on the same page[/b].