Writing HTML | About | FAQ | Alumni | Kudos | References | Tags | Lessons | previous | next |

8c. Links to the World: Internet Sites

You've been revving your engines, and itching to hit the Information SuperHighway, right? Here, we will extend our use of anchor tags to create links to resources out there on the Internet.

Objectives

After this lesson you will be able to:

Create an anchor to link to an Internet site.
Quickly copy the URL for a site and use it in your HTML document.

Lesson

Note: If you do not have the working document from the previous lesson, download a copy now.

HTML for Anchors to the Internet

Linking to a site on the Internet combines what we have worked on earlier in the lessons on Links to Local Files (Lesson 8a) by incorporating what we have learned about URLs (Lesson 8b). 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.

Now, we will add a hypertext link to a site that has information about volcanoes on the planet Mars. Follow these directions to add anchor links on your HTML document:

Open your index.html file in the text editor.
Below the heading, Volcanic Places on Mars, enter the following text:
```
<a href="http://solarviews.com/eng/mars.htm">
Mars</a> has its fair share of volcanic landforms, 
including the largest known volcano in the solar system,
<a href="http://solarviews.com/r/mars/olympus.jpg">
Olympus Mons</a>
```
Note: We've made a link to two different types of information. The first hyperlink connects to a web page that describes information about the planet Mars. The second is a link to a small GIF image of a Martian volcano.
Save and Reload in your web browser.

Note: We have shown you how to link directly to an image from another web server. You could quite easily use an off-site URL in your IMG tags for your own web apges. We strongly urge you to contact the site's creator and ask permission. See an example of an e-mail request we made for this tutorial.

In some cases, web site owners are penalized or charged for excessive accesses. For more information on this issue, see a Plea from the Widows Web.

A Quick 'n Easy Way to Enter URLs in Anchor Tags

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:

Open your HTML document index.html in the text editor
Under the heading "References", enter:
```
<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.
Connect to the US Geological Survey Education Index.
From the web page, use the mouse to Select the URL as displayed in the URL display field.
From the Edit menu, Copy the URL.
Now, return to your HTML document index.html
Click the mouse once between the two quote marks you inserted in step #2 and Paste the text you copied in step #5. The final anchor tag should look like:
```
<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

For additional practice, explore some of the following Internet sites with resources on Geology and/or Volcanoes. Copy the URLs and construct the hypertext links to at least two more sites in your References section:

Sites with Information on Volcanoes:: Alaska Volcano Observatory * Cascades Volcano Observatory * Michigan Tech Volcanoes Page * NASA Earth Observing System (EOS) IDS Volcanology Team * Volcano Information Center * Volcano/Earth Science-Oriented Servers * Smithsonian Global Volcanism Program (GVP) * Volcano Watch Newsletter * Volcanoes Online
Sites with General Information on Geology:: Yahoo: Earth Science * Earth Resources Observation Systems (EROS) Data Center * Tradewave Galaxy * NASA Observatorium * United States Geological Survey * WWW Virtual Library * US Geological Survey Volcanic Hazards Program

Check Your Work

Compare your web page with a sample of how this document should appear. If your web page was different from the sample or the links do not properly connect to a remote site, review the text you entered in the text editor. Note that your list of references may be different from the example.

Review Topics

What is the address for an item on the Internet?
What steps did you take for creating an anchor link to the NASA Internet Site?
What shortcut was identified for putting an URL into an anchor link?
Tell a colleague or friend about any other links that you put in your document.

Independent Practice

Create anchor links from your own web page that connect to some of the URLs addresses you have discovered.

Coming Next....

In the next lesson you will create links that connect to different sections of an HTML document.

GO TO.... | Lesson Index | previous: "URLs" | next: "Named Anchors" |

Writing HTML: Lesson 8c: Links to the World: Internet Sites
©1994-1999 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges

The 'net connection at MCLI is Alan Levine
Comments to alan.levine@domail.maricopa.edu

URL: http://www.mcli.dist.maricopa.edu/tut/tut8c.html