The real power of the web is the ability to create hypertext links to related information. That other information may be other web pages, graphics, sounds, digital movies, animations, software programs, contents of a file server, a log-in session to a remote computer, a software archive, or and "ftp" site.
The World Wide Web uses an addressing scheme known as URLs, or Uniform Resource Locators (sometimes also called "Universal Resource Locator"), to indicate the location of such items. These hypertext links, the ones usually underlined in blue, are known as anchors (This should not be news to you as you followed several to get this far!).
Wow! That sounds like a lot to do! Don't worry -- it is no more complex than what you have done up to this point.
After all, without the hypertext, we would be only calling this "Writing TML" and not Writing HTML
The simplest anchor link is one that opens another HTML file in the same directory as the presently displayed web page. The HTML format for doing this is:
<a href="filename.html">text that responds to link</a>
Think of it as "a" for anchor link and "href" for "hypertext reference".
The filename must be another HTML file. Whatever text occurs after the first > and before the closing </a> symbols will be the "hypertext" that appears underlined and "hyper."
Now follow these steps to build an anchor link in your HTML document to a local file:
Listed below are two places in the United States that are
considered "active" volcanic areas.
On May 18, 1980, after a long period of rest, this quiet
mountain in Washington provided <a href="msh.html">
detailed observations</a> on the mechanics
of highly explosive eruptions.
The text "detailed observations" will link the viewer to a second HTML document called msh.html. This second HTML file does not yet exist; we will construct it in steps (5) and (6).
<html>
<head>
<title>Mount St Helens</title>
</head>
<body>
<h1>Mount St Helens</h1>
The towering pine trees of this once-quiet mountain
were toppled over like toys.
</body>
</html>
In lesson 7, we learned how to display an "inline" graphic that would appear in your web page. With the anchor tag, you can also create a link to display a graphic file. When the anchor link is selected, it will download the image file and display the image by itself in an empty page.
The simplest anchor link is to a file in the same directory/folder as the document that calls it. The format for creating a hypertext link to a graphic is the same as above for linking to another HTML document:
<a href="filename.gif">text that responds to link</a>
where filename.gif is the name of a GIF image file.
Now follow these steps to add a link to a graphic file in your HTML document:
The towering pine trees of this once-quiet mountain
were <a href="msh.gif">toppled over like toys</a>.
The Uniform Resource Locator (URL) is what the WWW uses to find the location of files and documents from computers on the Internet. On your web browser screen, the URL for this document is typically displayed in the upper part of the Web browser window. The URL includes:
The URL is what you will need to build a link from the web page that you are creating to connect to some other piece of information available on the Internet. For more information, see Curling Up To URLs (v0.2)
type://in.ter.net.address/directory/sub-directory/.../filename
The "type" indicates the type of Internet server being accessed:
The type is always followed by "://" and the Internet address of a remote computer. This is in the structure of:
host.domain.domain.domain
For example:
machine.department.college.edu
123.45.6.78
office.company.com
agency.branch.gov
machine.organization.country
If the URL is to the main level of this host (its "home page"), then the URL is terminated with a slash "/". If you are linking to a sub-directory or a file, you must also add the exact path to that item using the slash character to indicate the entire file path.
Note: For most web servers spelling does count! So does capitalization! File names on UNIX computers are case sensitive, meaning that a file namedSpiffyText.htmlis a different file thanspiffytext.html
Note that URLs can link to any site, directory, subdirectory, text file, image, digital movie, or sound file on any Internet site that is set up for public access. The best way to see different URLs is just to move your mouse over any hypertext link in any web page -- if you look at the bottom of your web browser, it should display the URL that you would connect to if you clicked on that link. You could go to a big site such as Yahoo and "peek" at URLs (did you see the URL for Yahoo when you moved your mouse over the link in the this sentence?)
Here is an easy way to copy a URL for a link in any page. You first must access the "secret" pop-up menu from any hypertext link in a web page -- click and hold the mouse for Macintosh; click the right mouse button for Windows and Unix. From this menu, select Copy This Link Location (or similar menu item). After releasing the mouse button, jump to any text document and select Paste from the Edit menu. Voilà! You've just nabbed a URL from a link in the web page (this way, you can copy a URL without even visiting the page it links to!)
URL? Earl? Yurl? hurl? gyrl?
It's getting time to link to that Big Wide Web using the web's addressing scheme.
The Uniform Resource Locator (URL) is what the WWW uses to find the location of files and documents from computers on the Internet. On your web browser screen, the URL for this document is typically displayed in the upper part of the Web browser window. The URL includes:
The URL is what you will need to build a link from the web page that you are creating to connect to some other piece of information available on the Internet. For more information, see Curling Up To URLs (v0.2)
type://in.ter.net.address/directory/sub-directory/.../filename
The "type" indicates the type of Internet server being accessed:
The type is always followed by "://" and the Internet address of a remote computer. This is in the structure of:
host.domain.domain.domain
For example:
machine.department.college.edu
123.45.6.78
office.company.com
agency.branch.gov
machine.organization.country
If the URL is to the main level of this host (its "home page"), then the URL is terminated with a slash "/". If you are linking to a sub-directory or a file, you must also add the exact path to that item using the slash character to indicate the entire file path.
Note: For most web servers spelling does count! So does capitalization! File names on UNIX computers are case sensitive, meaning that a file namedSpiffyText.htmlis a different file thanspiffytext.html
Note that URLs can link to any site, directory, subdirectory, text file, image, digital movie, or sound file on any Internet site that is set up for public access. The best way to see different URLs is just to move your mouse over any hypertext link in any web page -- if you look at the bottom of your web browser, it should display the URL that you would connect to if you clicked on that link. You could go to a big site such as Yahoo and "peek" at URLs (did you see the URL for Yahoo when you moved your mouse over the link in the this sentence?)
Here is an easy way to copy a URL for a link in any page. You first must access the "secret" pop-up menu from any hypertext link in a web page -- click and hold the mouse for Macintosh; click the right mouse button for Windows and Unix. From this menu, select Copy This Link Location (or similar menu item). After releasing the mouse button, jump to any text document and select Paste from the Edit menu. Voilà! You've just nabbed a URL from a link in the web page (this way, you can copy a URL without even visiting the page it links to!)
Linking to a site on the Internet combines what we have worked on earlier in the lessons on Links to Local Files (previous Lesson 8) by incorporating what we have learned about URLs before). The full HTML format for an anchor link to an item on the Internet is:
<a href="URL">Text to Activate Link</a>
where URL is the full Uniform Resource Locator, in quotes, the address for the Internet site where you want to send the viewer. The string Text to Activate Link is what will show up as hypertext in your web browser (usually but not always) underlined and in blue. When a viewer clicks on this hypertext, the web browser will link them to the Internet site indicated by the URL. Remember that a URL can be a link to another World Wide Web (WWW) server, Gopher server, FTP site, or any text, graphic, sound, video file on these servers.
As you navigate among different web pages, the URL of the currently visible page can be viewed at the top of the web browser window (You may have to look for a menu option to Display URLs). For example, in this document, the URL looks something like:
http://www.mcli.dist.maricopa.edu/tut/tut8c.html
You can use your mouse to select and copy a URL from the web browser display and then paste it in the anchor tag of your HTML document. This is much more efficient than writing URLs down on paper (some are quite long!).
Now we will add some links to other sites that we will list under the References section of our Volcano lesson. One such site that might offer relevant information is the US Geological Survey.
Follow these steps:
<ul> <li> <a href="">Educational Resources from the USGS</a> </ul>
NOTE: We've constructed the hypertext link but we still need to enter a URL between the quotes.
<a href="http://info.er.usgs.gov/education/index.html"> Educational Resources from the USGS</a>
Note: You have just set up the HTML structure for an Unordered List, with each list item a hypertext link to a site that offers information about volcanoes. For a review of lists, see lesson 6
A named anchor is a hidden reference marker for a particular section of your HTML file. This might be used to link to a different section of the same page if it is long, or to a marked section of another page. For example, on this page you are viewing, I could create a hidden marker called "check" that marked the heading below "Check Your Work". Then, I write an anchor link that connects to this section of this document. Once you click on a link to this named anchor, your web browser will jump so this line is at the top of the screen.
Here is an example you can try right now. Go to Check Your Work. When you get there look for a link that will return you to this very spot.
The HTML format for creating the named anchor is:
<a name="NAME">Text to Link To</a>
or for the link you just tried above:
<a name="check">Check Your Work</a>
Notice how this subtly differs from the anchor link <a href=... that we learned about in previous on lesson 8.
When you want to create a hypertext link (or an "anchor link", see lesson 8a) to a named anchor, use the following HTML:
<a href="#xxxxx">Text to act as hypertext</a>
or for the link you just tried that sent you to the section below:
Go to <a href="#check">Check Your Work</a>
The "#" symbol instructs your web browser to look through the HTML document for a named anchor called "xxxxxx" or in our example "check". When you select or click on the hypertext, it brings the part of the document that contains the named anchor to the top of the screen.
NOTE: This index is marked off above and below by a solid line using the <hr> tag. The Italic style is used on the entries for the text. At this point we have only entered the text of the index entries. Below we will add the HTML to make the links active.
The way to do this is to put the HTML tags for inline images within the hypertext portion of the anchor tag:
<a href="fileX.html"> <img src="graphic.gif"> Go to Document X</a>
In your web page, this HTML code will display an inline image and the text Go to Document X. Both will act as hyperlinks; clicking on either the text or the picture will tell your web browser to go to the HTML file fileX.html. The image alone could be a hyperlink. In the World Wide Web, a "HyperGraphic" generally is surrounded by a colored box matching the color of hypertext on your web page, so you know that it is "active".
NOTE: Many browsers now can alter the color of hypertext and some pages have suppressed the display of the outline around HyperGraphic links. Generally, you can identify a hyperlink area on a web page by looking for a change in the cursor as it passes over a "hot" region. The cursor usually changes from an arrow to a hand when it passes over an active link.
From a design standpoint, we recommend that if you use pictures to act as hyperlinks that you offer also a text link or use the ALT= attribute in the <IMG...> tag in case the viewer has turned off the loading of images.
Lesson Index | previous: "Leeson 7" | next: "Preformatted Text" |