...a tutorial for creating web pages

IX d. Links to Sections of a Page

You have seen how to link to other web pages, whether they are ones you created or have found elsewhere on the Internet. What if you wanted to connect to a specific section within a document? YOU CAN!

Objectives

• Create a hidden reference marker for a particular section within an HTML file.
• Build a hypertext link that will connect to a particular section within an HTML file.
• Build a hypertext link that will connect to a particular section within another HTML file.
• Create a hypertext table of contents for a web page.

The Named Anchor

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, you could create a hidden marker called "check" that marked the heading below "Check Your Work". Then, you 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 to the "Check Your Work" section (a little further down this page). 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:

Notice how this subtly differs from the anchor link <a href=... that you learned about in lesson 9a.

Writing a Link to a Named Anchor

When you want to create a hypertext link (or an "anchor link", see lesson 9a) to a named anchor, use the following HTML:

Adding Named Anchors to the Favorite Cars Web Lesson

Now, we will build a table of contents for our lesson that will appear at the top of our Favorite Cars 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.

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"> Terminology</a></h2>
<h2><a name="domestic">Domestic Cars</a></h2>
<h2><a name="foreign">Foreign Cars</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.

Adding Links to a Named Anchor in the Same Document

Now we will set up a table of contents that will appear at the top of the screen. We will use an unordered list (see lesson 6 for more on lists) 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 Favorite Cars Web site heading enter the following text:
<hr>
<b>In this Lesson...</b>
<ul>
<i>
<li>Introduction</li>
<li>Terminology</li>
<li>Domestic Cars</li>
<li>Foreign Cars</li>
<li>Research Project</li>
</i>
</ul>
<hr>


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 lessons 9a. Rather than 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</li>
   to look like:
   <li><a href="#intro">Introduction</a></li>
   
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>
   <li><a href="#term">Terminology</a></li>
   <li><a href="#domestic">Domestic Cars</a></li>
   <li><a href="#foreign">Foreign Cars</a></li>
   <li><a href="#project">Research Project</a></li></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.

Adding Links to a Named Anchor in another Document

You can create a link that jumps to a section of another HTML document that is marked by a named anchor. The HTML for building a link to a named anchor in another local HTML document is:

In lesson 9a we created a hypertext link that jumped from the section of our lesson on Domestic Cars, namely Chevrolet to camaro.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 Favorite Cars Web page.

1. Open your camaro.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#domestic">Return to <i>Favorite Cars</i></a>
   

NOTE: We have included the Italic Style tag <i>...</i> within the text marked by the named anchor "domestic".

3. Save and Reload into your web browser. When you click on one of the hypertext links at the bottom of the camaro.html page, you should jump back to the "Domestic Cars" section of the Favorite Cars Web lesson. In this case the link is just the name of another HTML file, camaro.html, in the same directory as the index.html file. However, you can use a full URL (see lesson 8) 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 a fictitious web server, the syntax would be:
   <a href="http://www.godaddy.com/srv_0357/MCCS/tutorials/index.html#intro">Introduction</a>

The reference marker "#anchor_name" is tacked onto the end of the URL.

IX e. HyperGraphics

Text does not have a monopoly on being "hyper"... expand the versatility of your web pages by having pictures act as hyperlinks.

Objectives

• Insert a graphic button in your web page that links to another HTML document.
• Insert a small graphic that acts as a "postage stamp" button for a link to display a larger copy of the image.

A HyperLink Button

From the previous lessons, you have (hopefully) become comfortable with creating hypertext, text within your documents that connects a viewer to related information. You can also use inline images (see Lesson 8a) to act in a "hyper" manner. If you recall, in an earlier lesson you linked some text in your Favorite Cars Web, index.html, to a second page, camaro.html, that dealt with a specific model of Chevrolet.

Now in the latter page, we want to add a button that when clicked will link a reader back to the main lesson page. 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, it is recommended that if you use pictures to act as hyperlinks, also offer a text link or use the alt= attribute in the <img...> tag. Although it is a rarity nowadays that anyone would disable the browser to load images, other problems may occur. If the intended image fails to load the only indication of the image would be a square with a red X in it and no indication that the link existed unless the user would happen to run their mouse over it.

Now you will create a "hyper" graphic button. First, you need to find a copy of an arrow button in the images folder you copied back in the Independent Practice Section of Lesson 8. Next, add the HTML to make the button work:

1. Open the second HTML file, camaro.html in your text editor.
2. At the bottom, modify the last line to:

<hr>


<a href="index.html#domestic"><img src="images/left.gif"> Return to <i>Domestic Cars</i></a>




NOTE: The inline image tag (<img...>) is completely within the anchor between the > that marks the end of the URL and the </a> that marks the end of the hypertext. Also note how the <i> tag is used within the active hypertext to emphasize the title of the lesson. And finally, we have used the <hr> tag to put a horizontal rule or a line above the button graphic (for more on this tag see lesson 5).

3. Save the HTML file.
4. Return to your web browser, and select Open Local from the File menu to read in the camaro.html file.
5. Select Reload from the File menu to update the changes.
6. Test the hyperlink to the "Camaro" page and the new button that should return you to the Favorite Cars Web page.

"Thumbnail" Images

Previously, we advised against using large inline images in your web pages because viewers might have to wait a long time for images to download in the event of a bad connection and because they are bandwidth hogs. One way around this is to create miniature-size copies of the graphic, or "Thumbnails" which are displayed as inline graphics. Then, using the same steps as above, you can make the "Thumbnail" image act as a hyperlink that links to the full size image. In this way, the large images are downloaded only if the viewer decides to see it.

First, you need to get a copy of the following three image files from the images folder. (These files should be stored in your images folder/directory of your work area).

Next, you would have to create the thumbnails in a Graphics Editor and then link them in your main text file. For the purpose of this lesson the thumbnails have already been made for you.

NOTE: The difference in file sizes between the thumbnails and the actual full sized image. This is what you are trying to avoid, loading or caching those huge files without them actually having been requested for viewing.

1. Open the index.html file in your text editor.
2. Under the heading "Introduction" and after the sentence ending with: "...exorbitant cost, beauty of the design, rarity, or brand recognition", enter the following:
<p>Here are a few of example of Cars that are very much endeared but difficult for the masses to attain:</p>
<p>
<a href="images/458%2001.jpg"><img src="images/thumbs/458%2001.gif" alt="link to large image"></a>
<a href="images/Boss_r.jpg"><img src="images/thumbs/Boss_R.gif" alt="link to large image"></a>
<a href="images/veyron01.jpg"><img src="images/thumbs/veyron01.gif" alt="link to large image"></a>
</p>


The inline image (img src), 458%2001.gif acts as a hyperlink to a larger image, 458%2001.jpg. When a user clicks on any of the "Thumbnails", your web browser will display the larger image in another browser page, only then loading the full sized image.

3. Save and Reload in your web browser.

Check Your Work

Compare your web page with the sample of how this document should appear. If your web page was different from the sample, review the text you entered in the text editor. Some of the more common mistakes are discrepancies between spelling of the file names and the HTML code for the anchor links or not having the image files in the same directory as the HTML files. If you see this icon  then it usually means the HTML does not match the file listed in the <img> tag.

Review

Review topics for this lesson: 1. How did you create the graphic button in your web page? 2. How are "Thumbnail" links useful in including graphics in your web page? 3. How did you create your "thumbnail" link in your document?

Independent Practice

Try to add buttons that link two web pages to each other. In a later lesson we will learn how to avoid the "box" around a hypergraphic. For some applications that will be irrelevant because as you will have noticed, the Firefox browser did not display the colored box around the hypergraphic.

X. Special Characters

How do you say...

ÆñÞðßÿ?

NOTE: If the above characters do not display various accents or diacritical markers, then your web browser does not support the ISO character set. You would likely want to skip this lesson.

Objectives

• Use the HTML codes for ISO Latin 1 characters to display accent marks for non-English letters.
• Override the HTML use of < and > symbols when you need them in a document.
• Add extra spaces in between words and letters in a document.

Accent Marks

For example, in the Terminology section of our Favorite Cars Lesson, we want to add an explanation of a term that was used to describe a particular type of car. This term coupe is the French past participle for to cut, referring to a cut-down coach body but to use the proper spelling we need an accent, so that the word appears as coupé. In this case, we replace the "e" in coupe with the HTML for the acute accented "e" which is: &eacute;

Reference

1. Open the HTML file, index.html in your text editor.
2. Under the list of terms of the Terminology section enter the text:
   <p>While originally the word term <I>coup&eacute;</I> described any cut-down coach body, it later became associated with a specific type of truncated coach body that came into general use in Western Europe and America in the mid-18th century. In the 20th century the name was given to the closed, two-door, two-passenger automobile.</p>

NOTE: We have applied the acute accent mark for the letter "e" in this sentence. It may look strange! Be sure that you replace the letter with the sequence that displays the same letter with the accent mark.

3. Save and Reload the HTML file.

HTML Escape Sequences

Extra Spaces

As you may have seen, a web browser will ignore all extraneous spaces in your HTML files. However, there may be times when you really want to have more than one space. When? Some writers like to have two spaces following the period at the end of the sentence. What if you wanted to indent the first sentence of every paragraph? How about having a single word with its individual letters spaced far apart?

An HTML code for adding a space character is the special character known as the "non-breaking space":

Example

Non-Breaking Space

<b><tt>
C &nbsp; H &nbsp; E &nbsp; E &nbsp; S &nbsp; E
</tt></b>

Sample Result

---

Non-Breaking Space

<p>
&nbsp;&nbsp; When Sir Longhorn had tragically died, no one was left to carry on his tradition. There was much sadness in the land; and no cheese.
</p>
<p>
&nbsp;&nbsp; But then the young genius Sheila Colby discovered the missing ingredient; and once again, cheese was plentiful.
</p>

Sample Result

---

<p>
   When Sir Longhorn had tragically died, no one was left to carry on his tradition.  There was much sadness in the land.  And no cheese.
</p>
<p>
   But then the young genius Sheila Colby discovered the missing ingredient.  And once again, cheese was plentiful.
</p>

Sample Result

You may want to experiment with different ways to use the non-breaking space. At this time, we will not modify our HTML documents, but you may, if you wish, add the code for indenting each opening sentence of all paragraphs using

two instances of the special code for the non-breaking space.

Review

1. In HTML, what is the correct way to display a German umlaut (ü)? 2. What happens if you do not use an escape sequence for < and >? 3. Why would you need a special escape sequence for the & character? 4. How can you indent paragraphs?

Independent Practice

More Information

XI. Definition Lists

Yet another variety of

Objectives

1. Open the HTML file, index.html in your text editor.
2. After the unordered list under the heading Terminology enter the following:
<h3><i>Glossary</i></h3>
 <dl>
<dt><b>Carbon Fiber</b></dt>
<dd>A very strong, lightweight synthetic fiber used primarily as high performance, weight saving materials in:</dd>
   <ul>
   <li>Racing vehicles</li>
   <li>Spacecraft components</li>
   <li>Protective clothing</li>
   </ul>
<dt><b>Direct Injection</b></dt>
<dd>A type of fuel system in which fuel is injected at extremely high pressure (29,000 psi), directly into the combustion chamber to distribute the air/fuel mixture in very fine particles for greater performance and efficiency. Examples of such systems are:</dd>
   <ul>
   <li>TFSI (Audi)</li>
   <li>TFI (Porsche)</li>
   </ul>
<dt><b>Hemi</b></dt>
<dd>Hemispherical combustion chamber on OHV engines, Made popular by Chrysler/Dodge in the 50's and 60's; also obscurely used by Ford. Popular Hemi Engines:</dd>
   <ul>
   <li>426 Hemi (Dodge)</li>
   <li>6.2L Hemi (Chrysler, Dodge)</li>
   </ul>
<dt><b>Carbon Ceramic Brakes</b></dt>
<dd>Also known as Carbon Ceramic Matrix; high performance braking systems usually consisting of the rotor and pads; capable of unrivaled heat dissipation, light weight and excellent performance. Main benefits:</dd>
   <ul>
   <li>Shorter stopping distances</li>
   <li>Excellent resistance to brake fade</li>
   <li>Reduced unsprung weight which affects rotational mass and handling</li>
   </ul>
 </dl>

3. Save and Reload into your web browser.