Introduction
Up to this point we’ve been creating self-contained pages. This really isn’t any different than doing anything in Word or Publisher. The user can only read the page, not interact with it. What makes webpages so useful and dynamic is hypertext links – the ability to use code to create places that the user can click on and move to another place, page, or email address. This way the user can interact with your pages, moving from one place to another as they want to.
Hyperlinks
The way to create hypertext links in your page is to use the <a> tag with the href property. The “A” stands for “Anchor”. Anchor tags mark a spot on that page as an anchor. We will learn more about anchors on lesson 3. The “href” stands for “Hypertext Reference”. The href tag works like this:
<a href="url">Label</a>
where “url” is the Uniform Resource Locator (more on that in a minute), “Label” is the text you want your user to be able to click on (which will be blue and underlined), and the </a> is where the text will stop being a hyperlink.
Internet Sites
A Uniform Resource Locator is a really fancy name for an email address or web address. We’re going to start with some simple ones. Open an old assignment and type this in:
<a href="http://www.google.com">Google</a>
What you just did was create a link to the Google Internet site. The http:// is necessary in an HTML link, even though it is optional while you are typing in a URL in Internet Explorer.
Links to Internet sites are called absolute links because the full URL is specified. Next, we will learn about how to link to pages in the same location as the current page, in which it is not necessary to specify the full URL.
Local Pages
Another link you can make is a link to another page in your folder. Take any two of your old assignments and make sure they’re in the same location on your computer. In one of them type this code:
<a href="AssignmentName.html">Link to another page</a>.
“AssignmentName.html” needs to be exactly the name of the other file you’re trying to link to or it won’t work. Now try to make a link on the second page that goes back to the first page.
Links to local pages are called relative links because the destination page is found in relation to the current page.
E-mail Links
Links can also be used to make it easy for a user to send e-mail. Try typing the following into a web page:
<a href="mailto:rosenberger.luke@gmail.com">Email Mr. Rosenberger</a>
What you just did was create a link to automatically open up an email program and put in Mr.Rosenberger’s email address. You need to have the “mailto:” part to tell the browser that it is an email address and not something else. (You won’t actually be able to email anyone because the lab isn’t configured for student e-mail.)
Something to keep in mind is that the <a href> tag works inside of other tags such as <p>, <ul>, and <h1>. You can format your links just as you can any other text.