AOL - Web Page Course

HTML ... Working with hyperlinks

STEP 10
The very name HTML points us to the MOST USEFUL feature of web pages in the "HYPERTEXT" or "HYPERLINKS" description. Basically, when you add the "tags" for hyperlinks, the browser reads the tag and allows the page you are currently viewing to be "hot linked" to any other page within your own website, to any other EXACT LOCATION in the current page and/or to any other "live pages" on the entire World Wide Web.
The basic structure of "hyperlink tags" is as follows:
<a href = "html page name goes here"> hot linked text goes here </a>
It may be useful at this time to review the section on "navigating your computer" and the "organization of files" as this will become crucial when working through this stage of the course.
Every "hyperlink" MUST POINT to the correct page within your own website or to the Internet. The use of the "../" coding will become apparent here shortly. The text that falls between the "open hyperlink tag" ⁢a href = "..."> and the "end hyperlink tag" </a> will become the hot linked text. The viewer can "click on" this portion of text to be transported to anywhere you design. The HTML document containing the "hyperlink" is known as the "referring page". When the "referring page" calls for another HTML document that resides in the "same folder" as itself, you use very simple coding as per below:
<a href = "nextpage.htm"> Go to next page </a>
If the "referring page" calls for another HTML document that resides in a different folder than itself, this is where it can get tricky. If the "referring page" is WITHIN a "sub-folder" and needs to call for an HTML document in the folder "above" then you MUST use the following coding to make it work:
<a href = "../nextpage.htm"> Go to next page </a>
If you set up your websites as referenced earlier in the "structuring your files" section, then ALL of your HTML documents will reside in the "same folder" so using this "../" is NOT required. If you want to "link back" to your "home page" (which is ALWAYS index.htm) then you have to use this "../" coding to "go outside" the HTML folder to access the index.htm file.
What if you want to call for another website/page on the World Wide Web? This is rather simple as well, as long as you know the EXACT URL (Uniform Resource Locator) or commonly referred to as the "www" site address. Let's say that you have built a page that links to the Yahoo Search Engine... your coding would look like this:
<a href = "http://www.yahoo.com"> Click here to go to Yahoo! </a>
If you use the EXACT coding as above to link to Yahoo, then the Yahoo website will appear in the same window as your site, NOT in a separate window. This is very important to good design as you want to "keep your visitors at your site always" for as long as possible. To get around this, you simply add "target tags" to your hyperlinks as below:
<a href = "http://www.yahoo.com" target = "new_window"> CLICK HERE TO VISIT YAHOO! </a>
There are other "target tags" that you can use to control the windows in the browsers and more on this is covered in the "advanced" course.
HINT: You have probably already visited lots of great websites in your Internet travels. The best way to check out different hyperlinks (not to mention text formatting and more) is to click on the "VIEW" menu when in your browser and select "view source". The actual coding for the page that you have chosen will be displayed in a text editor for you to view. You CANNOT directly edit this file (in most cases...) but you can certainly "download" this file to your computer to edit the coding for your own use or you can simply "drag your mouse" over specific areas of code and perform a "copy and paste" into your own text editor.
Let's try making a simple page that "calls for" a hyperlink to the Yahoo site. Enter the following code into your text editor:
<html>
<body text = "#000000" bgcolor = "#FFFFFF">

<a href = "http://www.yahoo.com" target = "new_window">
CLICK HERE TO VISIT YAHOO! </a>

</body>
</html>

CLICK TO TEST

STEP 11
Now that we have learned how to link to an "outside" page on the World Wide Web, it is important to learn how to link to another "specific area" of any of our own web pages. This is very useful when you are using lots of text and sub-titles where the document becomes rather long. Visitors to your site may wish to got back to the "top" of any given page; you can make this easier for them with an "internal hyperlink". This kind of hyperlink also comes in handy when you want to "simplify" your websites by only including the minimum number of pages that have more information contained therein.
Note: We do NOT support this practice as any HTML document of this size can end up growing in size and take too long to "download" to your visitors computer. In order for you to test this "internal hyperlink", you must now create a "new HTML document" and call it "internal.htm". Here is the coding to enter in your text editor for this document:
<html>
<body text = "#000000" bgcolor = "#FFFFFF">

 
<a name = "top"></a>
This is the TOP OF THE PAGE! 
This is a test of "internal hyperlinks" to navigate inside an HTML page. 

<a href = "internal.htm#middle"> Click here to go to the middle of the page </a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<a name = "middle"></a>
 
This is the MIDDLE OF THE PAGE! 
This is a test of "internal hyperlinks" to navigate inside an HTML page. 

<a href = "internal.htm#bottom"> Click here to go to the bottom of the page </a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<a name = "bottom"></a>
 
This is the BOTTOM OF THE PAGE! 
This is a test of "internal hyperlinks" to navigate inside an HTML page. 

<a href = "internal.htm#top"> Click here to go to the top of the page </a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
</body>
</html>

CLICK TO TEST

STEP 12
The most important part of "hypertext" linking is used to link to other html pages within your own website. For the most part, websites are usually made up of one "main page" or "home page" (index.htm file) that has hypertext links in it that point to other html pages covering more specific information.
A simple example would be for a website covering your own personal information like hobbies, employment, family members, etc. We will set up a simple "homepage" at this point and then save it in the correct location on our computer. (Refer to the "organizing your files tutorial for the correct file and folder setup required.)
We will start by creating a simple html document using some of the skills you have mastered to this point and then save it as "index.htm" inside the "basicweb" folder. You will then create 3 more simple pages and save them like so:
hobbies.htm
job.htm
family.htm
NOTE: You MUST save these 3 files inside the "html" folder within the "basicweb" folder.
Once you have all 4 simple files, you will make the hypertext links that will allow you to "navigate" back and forth through your new website with ease. A sample "index.htm" file is provided below. Enter this code into your text editor noting the "hypertext" links very carefully.
<html>
<title> This is my homepage </title>

<body text = "#000000" bgcolor = "#FFFFFF" link = "#ff0000" alink = "#00ff00" vlink = "#0000ff">



Welcome to my homepage! 

My life is very interesting. I have some <a href = "html/hobbies.htm"> hobbies </a> and I have a <a href = "html/job.htm"> job </a> and a very nice <a href = "html/family.htm"> family </a>.

I am using this page to link to 3 other pages named: hobbies.htm, job.htm and family.htm. If all works correctly, then I should be able to link from page to page and then back to the main page again. I am naming this file "index.htm". 



</body>
</html>

Once you have made this "index.htm" file and saved it to your "basicweb" folder, create 3 more html files named hobbies.htm, job.htm and family.htm and save them to your "html" folder inside the "basicweb" folder. Below is the coding you put at the bottom of each of the 3 pages to make "hypertext" links to one another. Note the use of the "../" characters for the link back to the main "index.htm" page. Remember: The "../" characters take you "back" one folder level or "outside" of the current folder.
<center>

<a href = "hobbies.htm"> hobbies </a>
<a href = "job.htm"> job </a>
<a href = "family.htm"> family </a>
<a href = "../index.htm"> back to homepage </a>

</center>
NOTE: You may want to enter "spaces" between the links so that they do not all "crash" together. To do this, type the following characters in "one word" without any spaces, quotes or commas included: "&", "n", "b", "s", "p", ";"
You will notice the "body attributes" coding that goes at the top of your new files. There are 3 separate tags: link = "#ff0000" which will make your hypertext links RED, alink = "#00ff00" which will make your "active links" GREEN and vlink = "#0000ff" which will colour "visited links BLUE. You can change these colours at will to make your "hypertext" links "stand out from" your background colour but BE CAREFUL NOT TO MAKE any of these tags THE SAME COLOUR as your background colour tags or they will NOT SHOW UP ON YOUR PAGE!
If your links do NOT work on the first try, have patience as it gets a lot easier with practice.
CLICK TO TEST

STEP 13
It would be advisable to stop the tutorial at this point and spend some time practising your "hypertext" skills as this is probably the single MOST IMPORTANT part of web page design to MASTER. You will use "hypertext" linking in every website you create - a complete command of page navigation is crucial to your success. One of the most annoying things that will force visitors to your site(s) to leave quickly is poor page navigation. Your visitors (customers) want you to "walk them thru" the website efficiently and logically. Make it easy for them to "get back" to the homepage or to exit the site without additonal browser windows opening whenever possible.

[ CONTINUE ] [ BACK ] [ HOME ]