Leland Initiative Web Tutorial Series: Overview of Last Lesson In the previous lesson, we wrapped up our discussion of how to use HTML tags to format characters and paragraphs. Continuing to work with the example HTML file, I showed you how to create new paragraphs and line breaks. I also showed how to center and bold text and explained how these basic concepts can be used to format text in a variety of ways, as long as you know the proper tags to use. At the end of the last lesson, I said that we would cover lists in this lesson. I have changed my mind. I think we've covered the basics enough and should now dive into more substantial material. Over the past four lessons, we have basically covered ways in which you can use HTML as you would use a word processing program. That is, just like you can use a program like WordPerfect or MS Word to format text, make paragraphs and so forth, you can do the same with HTML. Of course, web pages are different from simple text documents, since you can "navigate" web pages, or move from page to page very quickly with a click of the mouse. In this session, we'll review the feature of HTML that makes navigation possible--hyperlinks. What is a Hyperlink? A hyperlink is text or an image in a web page that you can click with your mouse to perform one of several actions. These actions include:
In the case of text, hyperlinks are easy to spot. Text hyperlinks are usually a different color (usually blue) than other text on the page and are (usually) underlined as well. Image hyperlinks are often located on "menu bars" at the top of a web page. An example of often-used image hyperlinks are "arrows" that, when clicked, move you to the next page of a document. Another example is an icon that looks like a house that, when clicked, takes the user to a web site's home page. You can make any text or image into a hyperlink. Proper use of hyperlinks is essential to a good web site. You will need to make a hyperlink to every web page, document, and other related web sites in order for users to find those items. If you have a document in your web site but have neglected to furnish a hyperlink to it, then that document will be inaccessible! The Hyperlink Tag As with formatting text, creating hyperlinks is achieved by using HTML tags. Hyperlink tags are a bit more complex than the other tags we have covered so far, but the basic concept is the same--you create a "start" tag at the point where you want the hyperlink to be created and an "end" tag to tell the browser where the tag ends. An example of a hyperlink tag follows below: <a href="http://www.info.usaid.gov"> Let's break this tag apart to see what each element does. Of course the tag starts with a left bracket "<" and ends with a right bracket ">", as do all HTML tags. The letter "a" at the beginning of the tag stands for "anchor". That's just tag's way of telling the browser, "This is where the hyperlink starts" (or where the hyperlink is "anchored"). "href" stands for "hypertext reference". This is the tags way of telling the browser, "Whatever follows is what I want the hyperlink to point to". Note that there is an equals sign "=" just after this. This equal sign connects the "href" to whatever follows--whatever follows the equal sign will be what the hyperlink points to. Remember, the hyperlink can point to another web page within the site, another web page on a different web site, an image, a sound, a video clip, or a file to be downloaded. To restate, whatever follows the equals sign is what the hyperlink will point to. This will always be enclosed in double quotation marks ("xxxx"). In the example we're using, the hyperlink points to USAID's external web site, so the web address for that site (http://www.info.usaid.gov) is placed directly after the equals sign and is surrounded on both sides by double quotation marks. Using the Hyperlink Tag Now that you know a little about how the hyperlink tag works, it's time to see how to use it in a web page. The hyperlink tag has a "start" tag, which I detailed above, and an "end" tag, which turns off the hyperlink. The "end" tag for hyperlinks is simply "</a> (remember "a" stands for "anchor", so the "</a>" simply means "Turn off the anchor"--or "end the hyperlink here"). Whatever appears between the "start" tag and the "end" tag will be "clickable" on that web page. Let's use our sample HTML file to show how this works. I am going to add a line of text to the page that says something about going to USAID's homepage. I want to make some of the words in that line a hyperlink so users can click on the words and jump straight to USAID's homepage. Below is the file with the new line of text added, along with the hyperlink tags. Please note that I have changed the wording in the page to something a little more useful: <html> <head> <title>USAID Mock Homepage</title> </head> <body> <h1><center>US Agency for International Development</center></h1> Thank you for visiting the US Agency for International Development's (USAID) fake web site. <p>USAID is currently involved in a number of development projects worldwide. One example is the Agency's Leland Initiative. The Leland Initiative is designed to foster increased Internet access and use in about twenty African countries. One way the Initiative is trying to do this is by conducting an HTML "How To" online tutorial via the Leland Initiative listserv. You can find out more about this project by visiting the <a href="http://199.75.20.211/regions/afr/leland/index.htm">Leland Initiative Homepage</a>. Or, if you'd rather write, please send correspondence to the following snail mail address: <p align=center>Jeff Bland<br> 111 Anywhere Street<br> Anywhere, USA 00000</p> </body> </html> Note that I added a line about visiting the Leland Initiative Homepage. The "start" hyperlink tag (<a href="http://199.75.20.211/regions/afr/leland/index.htm">) appears directly before the word "Leland", and the "end" tag (</a>) appears directly after the word "Homepage". If you look at this file in your web browser, you will see that the words "Leland Initiative Homepage" are blue and underlined--in other words, they are a hyperlink. Click on the hyperlink, and it will take you to the web address specified in the beginning tag. Using Hyperlinks As Bookmarks You can also use hyperlinks to jump to a different location within the SAME web page. To do so, you must first create a "bookmark". A bookmark is simply a location that can be located by a hyperlink tag. You create a bookmark by using the bookmark HTML tag. An example of such a tag is <a name="top">. The image or text that lies between this type of "start" bookmark tag and the "end" tag of </a> will be jumped to when you click on a hyperlink that references the name contained within double quotes (in this case, "top"). The hyperlink tag you would create to jump to this bookmark tag would be as follows: <a href="default.htm#top"> Let's add these examples to our sample HTML file to show you how it works. I'm going to create a hyperlink at the bottom of the page that, when clicked, will move the user to the top of the page, as the name implies: <html> <head> <title>USAID Mock Homepage</title> </head> <body> <a name="top"><h1><center>US Agency for International Development</center></h1></a> Thank you for visiting the US Agency for International Development's (USAID) fake web site. <p>USAID is currently involved in a number of development projects worldwide. One example is the Agency's Leland Initiative. The Leland Initiative is designed to foster increased Internet access and use in about twenty African countries. One way the Initiative is trying to do this is by conducting an HTML "How To" online tutorial via the Leland Initiative listserv. You can find out more about this project by visiting the <a href="http://199.75.20.211/regions/afr/leland/index.htm">Leland Initiative Homepage</a>. Or, if you'd rather write, please send correspondence to the following snail mail address: <p align=center>Jeff Bland<br> 111 Anywhere Street<br> Anywhere, USA 00000</p> <p><bold><center><a href="default.htm#top">Back to Top</a></center></bold> </body> </html> Note that I put the "Back to Top" hyperlink at the bottom of the page (under the address), while the bookmark is at the top of the page (around the heading of the page). Thus, if you look at this file in your web browser and click on "Back to Top", you should jump to the spot in the page that is bookmarked. Also note that the word or words that are bookmarked, unlike hyperlink text, is not a different color or underlined. Wrap Up Well, that about does it for hyperlinks. Hope this makes sense to everyone. Related Sites As usual, here are more web sites that can help you out:
Next Session In the next session, we'll learn how to insert images into a web page and to create hyperlinks from those images. |