and more.
These pages and files can exist on Web servers anywhere in the world.
Using a simple line of HTML code, we can create a "hotspot" in the form of text or a graphic that when clicked on will bring us to the remote content.
Let's begin our exercise in hyperlinking by linking the two pages we've created to each other.
Open up the first page (mypage1.html) in your text editor or word processor and place the following line just above the closing <./body>*** tag:
<.P>
<.CENTER>
<.A HREF="mypage2.html">Go to page 2<./A>
<./CENTER>
Save the file and load it into your browser.
For this exercise to work correctly, both files (mypage1.html and mypage2.html) should reside in the same folder or directory on your hard drive.
You should see the line "Go to page 2" centered at the bottom of the page.
The text should be underlined indicating it is a hyperlink.
Click on the link, and if you entered the HTML correctly, your browser will jump to the second page.
Creating hyperlinks is that easy! Now let's take a closer look at the code to see how it works.
The tag for hypertext links contains two parts -- an anchor and a target.
The letter "A" designates the anchor, and it marks the section of text to be linked.
The target is designated by HREF (for hypertext reference), and as its name implies, refers to the location and name of the document or file to be linked to.
Examine our example above. The anchor is the text "Go to page 2," and the target is the page "mypage2.html." Since mypage2.html resides in the same location as mypage1.html, we don't need to indicate the Internet address, or URL (universal resource locator), of the page.
Now we're ready to create a link back to the first page from the second.
Open up mypage2.html in your text editor or word processor and add the following code just above the <./body> tag:
<.P>
<.CENTER>
<.A HREF="mypage1.html">Back to page 1<./A>
<./CENTER>
This will create a hyperlink that will take us back to the first page when it is clicked.
Creating links to pages and files that reside on other servers is just as simple as the examples above.
We only need to add a full URL or Internet address to our HREF so the browser can find the file. Let's try it.
Load mypage2.html in your text editor or word processor and locate the unordered list of favorite websites we created.
Make the following changes to the code:
<.UL>
<.LI><.A HREF="http://www.aol.com">AOL<./A>
<.LI><.A HREF="http://www.yahoo.com">Yahoo<./A>
<.LI><.A HREF="http://www.netguide.com">Netguide<./A>
<.LI><.A HREF="http://www.abcnews.com">ABC News<./A>
<.LI><.A HREF="http://www.cdnow.com">CD Now<./A>
<./UL>
Save the page and load it into your browser.
Notice how the name of each of website is now a hypertext link.
If you're connected to the Internet, clicking on any of these links should bring you to the site chosen.
***We add a period to HTML tags between the < and tag name to show the code in these tutorials.
Omit the period in your own html documents.
For example: use and not <.tag>.
To a Mailbox - Mailto
There may be times when you will want to link to a mailbox rather than a Web page.
For example, you may want to create a Feedback link so visitors to your Web page can easily send you a message. By placing a mailto link on your page, when a visitor clicks on it, their Internet mail client will be launched with your e-mail address automatically inserted.
To try it out, place the following code below the Back to Page 1 link on mypage2.html. Replace either your screen name with your actual AOL screen name (without spaces), or replace the entire e-mail address with another e-mail address:
<.P>***
<.CENTER>
<.A HREF="mailto:your screen name@aol.com">E-mail me!<./A>
<./CENTER>
Save the file and load it into your browser.
Your e-mail client should load when you click on this link and you should see your e-mail address in the To: field.
***We add a period to HTML tags between the < and tag name to show the code in these tutorials. Omit the period in your own html documents. For example: use and not <.tag>.
Linking to a Specific Spot On a Page
A hyperlink does not necessarily take you to another page or file.
It can also be used to jump to another spot within the same page.
This is especially helpful in those cases where the page is very long.
There are two steps in creating this kind of hyperlink.
First you must mark the location on the page where you want to jump to by creating a named anchor.
Named anchors can be either portions of text or a graphic.
For this exercise, we will use the Welcome to my first Web page!
heading found in our first sample page.
Load mypage1.html into your editor and locate the line:
<.H1>Welcome to my first Web page!<./H1>***
Modify it as follows:
<.A NAME="top"><.H1>Welcome to my first Web page!<./H1><./A>
After saving this change,
load the page in your browser.
Nothing appears to have changed.
We now need to create a link to this anchor.
Now that we've marked the location, in this case the top of the page, we can go ahead and complete the link.
Add the following code above the Go to page 2 section of the mypage1.html:
<.P>
<.CENTER>
<.A HREF="#top">Back to the top<./A>
<./CENTER>
Notice the format used in referencing the anchor: the pound sign (#) followed by the anchor's name (top).
Save the file and reload it into your browser.
When you scroll down to the bottom of the page, you should see the new link.
Click on Back to the top, and the browser will jump up to the top of the page.
Named anchors are not limited to links within a single page.
You can also link to named anchors in external pages by including the full URL before the anchor's name.
***We add a period to HTML tags between the < and tag name to show the code in these tutorials. Omit the period in your own html documents. For example: use and not <.tag>.
| 
