8. Linking to the World
Activity
Linking to the Internet
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:
1. Open your volc.html and create a copy and rename that to index.html file in the text editor.
2. 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://www.solarviews.com/browse/mgs/mgsmons1.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 large JPEG image of a Martian volcano.
3. 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 pages. We strongly urge you to contact the site's creator
and ask permission.
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:
1. Open your HTML document index.html in the text editor
2. Under the heading "References", enter:
Use these references to start your research:
<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.
3. Connect to the US Geological Survey Education Index.
4. From the web page, use the mouse to Select the URL as displayed in the URL display field.
5. From the Edit menu, Copy the URL.
6. Now, return to your HTML document index.html
7. 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 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
Now, we will build a table of contents for our lesson that will appear at the top of our Volcano Web page. The entries for this will be the headings we have already created. Each will act as a hypertext link to a particular section of our lesson.
The first step is to create a named anchor for each of the heading sections in your Volcano Web lesson:
1. Open your index.html file in the text editor
2. Find the heading for the Introduction. Change it from:
<h2>Introduction</h2>
so that it looks like:
<h2><a name="intro">Introduction</a></h2>
NOTE: You have just marked the line that contains the header "Introduction" with a hidden reference marker, the named anchor "intro".
3. In a similar manner, change all header <h2> tags for the other sections:
<h2><A NAME="term">Volcano Terminology</a></h2>
<h2><A NAME="usa">Volcanic Places in the USA</a></h2>
<h2><A NAME="mars">Volcanic Places on Mars</a></h2>
<h2><A NAME="project">Research Project</a></h2>
4. If you Reload now from your web browser, you will not notice any visible change. The named anchor tags we have just added are hidden from the user's view.
Now we will set up a table of contents that will appear at the top of the screen. We will use an unordered list to create this list:
1. If not already open, open your index.html file in the text editor.
2. Below the first sentence under the Volcano Web heading enter the following text:
<hr>
<b>In this Lesson...</b>
<ul><i>
<li>Introduction
<li>Volcano Terminology
<li>Volcanic Places in the USA
<li>Volcanic Places on Mars
<li>Research Project</i>
</ul>
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.
3. Save and Reload into in your web browser.
Finally, we want to make each item of the list act as a hypertext link to another section of the document. To do this, we will use a variation of the basic anchor link. Rather then linking to another file, we link to one of the named anchors (the hidden markers that you created above) within the same HTML file. We indicate a named anchor by preceding the reference marker name with a "#" symbol:
1. Open your index.html file in the text editor
2. Go to the first list item in your index section. Change it from:
<li>Introduction
to look like:
<li><a href="#intro">Introduction</a>
3. You should now be able to fill in the other links to named anchors so that the section looks like:
<hr>
<b>In this Lesson...</b>
<ul><i>
<li><a href="#intro">Introduction</a>
<li><a href="#term">Volcano Terminology</a>
<li><a href="#usa">Volcanic Places in the USA</a>
<li><a href="#mars">Volcanic Places on Mars</a>
<li><a href="#project">Research Project</a></i>
</ul>
4. Save and Reload into your web browser. When you click on an item in your index, the browser should display the associated section at the top of your screen.
NOTE:Your web browser will try its best to bring to the top of the browser the text enclosed by the <a name="xxx">...</a> occurs. In this case, there is no content after the last few examples, so when you click on the link to Research Project it will not jump to the very top of the screen. If you really wish to make this happen, until we write more content under this heading in youre document, you can insert 10-20 of <br> tags.
We have created a hypertext link that jumped from the section of our lesson on Mount St. Helens to msh.html, a separate HTML file. Now we will add a link in that second document that will return to the original section of the main Volcano page.
1. Open your msh.html file in the text editor
2. Near the bottom of the HTML (but above the </body> tag) enter the following text:
<hr>
<a href="index.html#usa">Return to <i>Volcano Web</i></a>
NOTE: We have included the Italic Style tag <i>...</i> within the text marked by the named anchor "usa".
3. Save and Reload into your web browser. When you click on one of the hypertext links at the bottom of the msh.html page, you should jump back to the "Volcanic Places in the USA" section of the Volcano Web lesson.
In this case the link is just the name of another HTML file, msh.html, in the same directory as the index.html file. However, you can use a full URL to link to a named anchor in an HTML file on a remote computer. For example, to create a link to the "Introduction" section of an HTML file stored on the MCLI WWW server, the syntax would be:
<a href="http://www.mcli.dist.maricopa.edu/tut/final/index.html#intro">
Introduction to Volcano Web</a>
Performance
A) Independent Practice
Create a web page that connect to some of the URLs addresses below.
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
B) Performance Quiz
Create a web page that connect to some of the URLs addresses below.
0catch.com
freeservers.com
digitalrice.com
150m.com
freewebs.com
The above site contains a format of http://www. xxxxxxx.xxx format, the x signifies the site name.
Create named anchors for the headings in your new web page and build an index that will link to these sub-sections.
Save your html code to "performance8a.htm".
Criteria:
Completed exercises ……………………………………………………………………. 30%
Ability to create an anchor to the internet.……… ……… …………………………… 30%
Ability to link sections of a page…….………....……………………………………….. 20%
Accuracy of HTML Code used..... …………………….… …………………………….. 20%
TOTAL 100%
ASSIGNMENT
Study in advance how to Hyperlink graphics?