Before you do this exercise, please complete exercise E01. Next, prepare yourself for one of the more interesting aspects of html: links. Links are what make the web what it is today, a means for connecting to information anywhere on the web. They are the most important part of the web.
This exercise is rather lengthy. I advise you to set aside a half hour to do it.
A link is fairly easy to create. You use what's called the anchor <a> tag. The term "anchor" is a bit of a misnomer, however, because an anchor tag usually does the opposite of anchoring a viewer to one place. The anchor tag is most often used for creating a "hyperlink": when a viewer clicks on a hyperlink, the viewer is taken to a different page or a different location on the same page.
The reason it's called an anchor tag is because the anchor tag can also be used to identify a specific location (an anchor) on a page that a link can bring a viewer TO.
When an anchor tag is used for linking to another
page (or location on a page), it will contain
the HREF attribute with the "value" being the URL
or path to the file it's linking to. HREF stands
for "hypertext reference".
To link to another page, you need to have the URL (uniform resource locator, more commonly called the address) of the other page. There are absolute and relative URLs. In our examples below we will use both.
First, the link below uses an absolute URL. This type of URL can be used on any page anywhere on the web and it will still locate the page you specify. Please look at it in the code. When you look at it in the code, also note the attribute: "target=_blank". This causes the browser program to open a new browser window with the page in it. The underscore in the attribute value is required.
Relative URLs contain only enough information to allow the link to search for a file within local folders. Only a local path is shown. Such a path will not have "http" at the start of it. Instead, it will usually be just a file name or else have the file name preceded by the names of the folders that the linked-to file is contained in, separated by slashes.
Such a path is relative to the location of the other file, hence the term "relative path". In our situation, both E01 and E02 should be in the same folder after you save both of them per the instructions. In such a case, only the name of the file is required as the path. However, assuming that the file that is being linked to is in a folder named sample that is inside the folder containing the file with the link, then the path would look like this:
sample/filename.html
Why use a relative path vs. an absolute path? Relative paths are easier to write, they use less code (which means faster page loading), and often allow for faster linking. The link below only has the name of a file in it. That's because it goes to a file that's in the same folder that this page is in. As part of your exercise below you will be changing it to go to your E01_yourlastname.html file and you will need to make sure that your E01 and E02 files are in the same folder. Please inspect the code below for how such a path is used.
By default (meaning, without doing anything to them) text links are blue and underlined. Although you can change the format, I suggest you be very careful before you do. If you leave a text link in the default format (underlined and blue), there will be no doubt that it is a link. We have all accidentally found links that do not appear to be links because they appear almost identical to surrounding text. Normally we would not click on them because we would not know that it was possible to. Make sure viewers know where a link is. I also urge you to avoid underlining words that are not links for the same reason.
No web page is truly complete without a way to contact the web site's people. By convention, many pages have on the bottom a way to email the person or company: an email link.
When an email link is clicked on, it will pre-address a new email to the address specified in the link.
Email links look like other links except that the href attribute value begins with "mailto:" immediately followed by an email address. An email link looks like this:
<a href="mailto:anyone@isp.com">
Below is an example of how to use a link to send an email. Click on the link below and see what happens.
An email linkAnchor tags allow you to go to a specific a location on a page. This is particularly useful with lengthy pages. You can have a table of contents at the top of the page that consists of links which will bring you to a specified location on that page. This html course has a main page that has a table of contents that uses this method.
After determining the location on the page that you want to be able to link to, an anchor tag is placed at that location. The location is assigned a name as an attribute of that anchor tag.
Therefore, for this to work you need to have two sets of anchor <a> tags. First, a hypertext link created with the anchor <a> tag using the HREF= attribute. Second, another anchor <a> tag with the NAME= attribute to identify the location being linked to.
Here is what the anchor tag looks like when used for naming a location on a page. Note that the closing anchor tag </a> must be used even though there is no content between it and the opening anchor tag.
<a name="top"></a>
The text that the viewer sees being used for the link to a specific location on a page might say something like this: TOP OF PAGE. In fact that's what that link will bring you to. Try it. And then you can use your browser's back arrow <= to return here.
In order for it to work, the top of the page needs to have an anchor tag with the "name" attribute and the value "top". Look at the code near the top of this page, just underneath the BODY tag. You will see the anchor named "top" that uses the same code as the preceding code sample above.
Also, note that the href attribute for the TOP OF PAGE link above includes of the number sign (#) followed immediately by the name of the anchor that it's linking to. In this case it looks like the following:
Please check this page's code, locate it, and inspect it.href="#top"
name="blues"
directly above the section title "The
Blues" (an h3 header) up above. You can use the
code for the "top" anchor just beneath this page's <body> tag at the top of this page as a guide.
© 2009 Dan Vaughan and its licensors. All rights reserved.