Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P14 ppsx

Links to Other Documents on the Web



Links to Other Documents on the Web
So, now you have a whole set of pages on your local disk, all linked to each other. In some places in your
pages, however, you want to refer to a page somewhere else on the Internetfor example, to The First Caesars
page by Dr. Ellis Knox at Boise State University for more information on the early Roman emperors. You also
can use the link tag to link those other pages on the Internet, which I'll call remote pages. Remote pages are
contained somewhere on the Web other than the system on which you're currently working.
The HTML code you use to link pages on the Web looks exactly the same as the code you use for links between
local pages. You still use the
<a> tag with an HRef attribute, and you include some text to serve as the link on
your Web page. Rather than a filename or a path in the
HRef, however, you use the URL of that page on the
Web, as
Figure 5.5 shows.
Figure 5.5. Link to remote files.

Task: Exercise 5.2. Linking Your Caesar Pages to the Web
Go back to those two pages you linked together earlier today, the ones about the Caesars. The menu.html
file contains several links to other local pages that provide information about 12 Roman emperors.
Now suppose that you want to add a link to the bottom of the menu file to point to The First Caesars page
by Dr. Ellis Knox at Boise State University, whose URL is
/>First, add the appropriate text for the link to your menu page, as follows:
<p><i>The First Caesars</i> page by Dr. Ellis Knox has more information on
these Emperors.</p>

What if you don't know the URL of the home page for The First Caesars page (or the page to which you want
to link), but you do know how to get to it by following several links on several different people's home
pages? Not a problem. Use your browser to find the home page for the page to which you want to link.

Figure 5.6 shows what The First Caesars page looks like in a browser.
Figure 5.6. The First Caesars page.
[View full size image]
file:///G|/1/0672328860/ch05lev1sec3.html (1 von 6) [19.12.2006 13:48:39]
Links to Other Documents on the Web

Note
If your system isn't connected to the Internet, you might want to connect now so that you can
test links to pages stored on the Web.

You can find the URL of the page you're currently viewing in your browser in the address box at the top of
the browser window. To find the URL for a page you want to link to, use your browser to go to the page,
copy the URL from the address field, and paste it into the href attribute of the link tag. No typing!
After you have the URL of the page, you can construct a link tag in your menu file and paste the appropriate
URL into the link, like this:
Input
<p>"<i><a href=" />The First Caesars</a></i>"page by Dr. Ellis Knox has more information on these Emperors.</p>

In that code I also italicized the title of the page using the <i> tag. You'll learn more about that tag and
other text formatting tags in
Lesson 6, "Formatting Text with HTML and CSS."
Of course, if you already know the URL of the page to which you want to link, you can just type it into the
href part of the link. Keep in mind, however, that if you make a mistake, your browser won't be able to find
the file on the other end. Many URLs are too complex for humans to be able to remember them; I prefer to
copy and paste whenever I can to cut down on the chances of typing URLs incorrectly.
file:///G|/1/0672328860/ch05lev1sec3.html (2 von 6) [19.12.2006 13:48:39]
Links to Other Documents on the Web
Figure 5.7 shows how the menu.html file, with the new link in it, looks when it is displayed.
Output
Figure 5.7. The First Caesars link.

[View full size image]

Task: Exercise 5.3. Creating a Link Menu
Now that you've learned how to create lists and links, you can create a link menu. Link menus
are links on your web page that are arranged in list form or in some other short, easy-to-read,
and easy-to-understand format. Link menus are terrific for pages that are organized in a
hierarchy, for tables of contents, or for navigation among several pages. Web pages that consist
of nothing but links often organize the links in menu form.
The idea of a link menu is that you use short, descriptive terms as the links, with either no text
following the link or with a further description following the link itself. Link menus look best in a
bulleted or unordered list format, but you also can use glossary lists or just plain paragraphs.
Link menus enable your readers to scan the list of links quickly and easily, a task that might be
difficult if you bury your links in body text.
In this exercise, you'll create a web page for a set of book reviews. This page will serve as the
index to the reviews, so the link menu you'll create is essentially a menu of book names.
Start with a simple page framework: a first-level heading and some basic explanatory text:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" /><html>
<head>
file:///G|/1/0672328860/ch05lev1sec3.html (3 von 6) [19.12.2006 13:48:39]
Links to Other Documents on the Web
<title>Really Honest Book Reviews</title>
</head>
<body>
<h1>Really Honest Book Reviews</h1>
<p>I read a lot of books about many different subjects. Though I'm not a
book critic, and I don't do this for a living, I enjoy a really good read
every now and then. Here's a list of books that I've read recently:</p>

Now add the list that will become the links, without the link tags themselves. It's always easier to

start with link text and then attach actual links afterward. For this list, you'll use a tag to create a
bulleted list of individual books. The <ol> tag wouldn't be appropriate because the numbers
would imply that you were ranking the books in some way. Here's the HTML list of books;
Figure
5.8 shows the page as it currently looks with the introduction and the list.
Input
<ul>
<li><i>The Rainbow Returns</i> by E. Smith</li>
<li><i>Seven Steps to Immeasurable Wealth</i> by R. U. Needy</li>
<li><i>The Food-Lovers Guide to Weight Loss</i> by L. Goode</li>
<li><i>The Silly Person's Guide to Seriousness</i> by M. Nott</li>
</ul>
</body>
</html>

Output
Figure 5.8. A list of books.
[View full size image]

Now, modify each of the list items so that they include link tags. You'll need to keep the <li> tag
in there because it indicates where the list items begin. Just add the
<a> tags around the text
itself. Here you'll link to filenames on the local disk in the same directory as this file, with each
individual file containing the review for the particular book:
<ul>
<li><a href="rainbow.html"><i>The Rainbow Returns</i> by E. Smith</a></li>
file:///G|/1/0672328860/ch05lev1sec3.html (4 von 6) [19.12.2006 13:48:39]
Links to Other Documents on the Web
<li><a href="wealth.html"><i>Seven Steps to Immeasurable Wealth</i> by R. U.
Needy</a></li>

<li><a href="food.html"><i>The Food-Lovers Guide to Weight Loss</i> by L.
Goode</a></li>
<li><a href="silly.html"><i>The Silly Person's Guide to Seriousness</i> by M.
Nott</a></li>
</ul>

The menu of books looks fine, although it's a little sparse. Your readers don't know anything
about each book (although some of the book names indicate the subject matter) or whether the
review is good or bad. An improvement would be to add some short explanatory text after the
links to provide hints of what is on the other side of the link:
Input
<ul>
<li><a href=rainbow.html"><i>The Rainbow Returns</i> by E. Smith</a>. A"
fantasy story set in biblical times. Slow at times, but interesting.</li>
<li><a href="wealth.html"><i>Seven Steps to Immeasurable Wealth</i> by R. U.
Needy</a>. I'm still poor, but I'm happy! And that's the whole point.</li>
<li><a href="food.html"><i>The Food-Lovers Guide to Weight Loss</i> by L. Goode
</a>. At last! A diet book with recipes that taste good!</li>
<li><a href="silly.html"><i>The Silly Person's Guide to Seriousness</i> by M.
Nott</a>. Come on who wants to be serious?</li>
</ul>

The final list looks like Figure 5.9.
Output
Figure 5.9. The final menu listing.
[View full size image]

You'll use link menus similar to this one throughout this book.
file:///G|/1/0672328860/ch05lev1sec3.html (5 von 6) [19.12.2006 13:48:39]
Links to Other Documents on the Web

file:///G|/1/0672328860/ch05lev1sec3.html (6 von 6) [19.12.2006 13:48:39]
Linking to Specific Places Within Documents


Linking to Specific Places Within Documents
The links you've created so far today have been from one point in a page to another page. But what if,
rather than linking to that second page in general, you want to link to a specific place within that
pagefor example, to the fourth major section down?
You can do so in HTML by creating an anchor within the second page. The anchor creates a special
element that you can link to inside the page. The link you create in the first page will contain both the
name of the file to which you're linking and the name of that anchor. Then, when you follow the link
with your browser, the browser will load the second page and then scroll down to the location of the
anchor (
Figure 5.10 shows an example).
Figure 5.10. Links and anchors.

Anchors are special places that you can link to inside documents. Links can then jump to those special
places inside the page as opposed to jumping just to the top of the page.
You can use links and anchors within the same page so that if you select one of those links, you jump to
a different anchor within the page. For example, if you create an anchor at the top of a page, you could
add links after each section of the page that return the user to the top. You could also create anchors at
the beginning of each section and include a table of contents at the top of the page that has links to the
sections.
Creating Links and Anchors
You create an anchor in nearly the same way that you create a link: by using the <a> tag. If you
file:///G|/1/0672328860/ch05lev1sec4.html (1 von 8) [19.12.2006 13:48:40]
Linking to Specific Places Within Documents
wondered why the link tag uses an <a> rather than an <l>, now you know: a actually stands for anchor.

When you specify links by using
<a>, the link has two parts: the href attribute in the opening <a> tag
and the text between the opening and closing tags that serve as a hot spot for the link.
You create anchors in much the same way, but rather than using the
HRef attribute in the <a> tag, you
use the
name attribute. The name attribute takes a keyword (or words) that name the anchor. Figure 5.11
shows the parts of the
<a> tag when used to indicate an anchor.
Figure 5.11. The <a> tag and anchors.

Including text between the anchor tags is optional. The actual anchor is placed at the location of the
opening anchor tag, so you can just as easily write it as
<a name="myanchor"></a>

The browser scrolls the page to the location of the anchor so that it's at the top of the screen.
For example, to create an anchor at the section of a page labeled Part 4, you might add an anchor called
part4 to the heading, similar to the following:
<h1><a name="part4">Part Four: Grapefruit from Heaven</a></h1>

Unlike links, anchors don't show up in the final displayed page. They're just a marker that links can point
to.
To point to an anchor in a link, use the same form of link that you would when linking to the whole
page, with the filename or URL of the page in the
href attribute. After the name of the page, however,
include a hash sign (
#) and the name of the anchor exactly as it appears in the name attribute of that
anchor (including the same uppercase and lowercase characters!), like the following:
<a href="mybigdoc.html#part4">Go to Part 4</a>
file:///G|/1/0672328860/ch05lev1sec4.html (2 von 8) [19.12.2006 13:48:40]

Linking to Specific Places Within Documents

This link tells the browser to load the page mybigdoc.html and then to scroll down to the anchor named
part4. The text inside the anchor definition will appear at the top of the screen.
Task: Exercise 5.4. Linking Sections Between Two Pages
Now let's create an example with two pages. These two pages are part of an online
reference to classical music, in which each web page contains all the references for a
particular letter of the alphabet (
a.html, b.html, and so on). The reference could have been
organized such that each section is its own page. Organizing it that way, however, would
have involved several pages to manage, as well as many pages the readers would have to
load if they were exploring the reference. Bunching the related sections together under
lettered groupings is more efficient in this case. (
Lesson 16, "Writing Good Web Pages:
Do's and Don'ts," goes into more detail about the trade-offs between short and long pages.)
The first page you'll look at is for M; the first section looks like the following in HTML:
Input
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" /><html>
<head>
<title>Classical Music: M</title>
</head>
<body>
<h1>M</h1>
<h2>Madrigals</h2>
<ul>
<li>William Byrd, <em>This Sweet and Merry Month of May</em></li>
<li>William Byrd, <em>Though Amaryllis Dance</em></li>
<li>Orlando Gibbons, <em>The Silver Swan</em></li>
<li>Claudio Monteverdi, <em>Lamento d'Arianna</em></li>

<li>Thomas Morley, <em>My Bonny Lass She Smileth</em></li>
<li>Thomas Weelkes, <em>Thule, the Period of Cosmography</em></li>
<li>John Wilbye, <em>Sweet Honey-Sucking Bees</em></li>
</ul>
<p>Secular vocal music in four, five and six parts, usually a capella.
15th-16th centuries.</p>
<p><em>See Also</em>
Byrd, Gibbons, Monteverdi, Morley, Weelkes, Wilbye</p>
</body>
</html>

Figure 5.12 shows how this section looks when it's displayed.
Output
Figure 5.12. Part M of the Online Music Reference.
[View full size image]
file:///G|/1/0672328860/ch05lev1sec4.html (3 von 8) [19.12.2006 13:48:40]
Linking to Specific Places Within Documents

In the last line (the See Also), linking the composer names to their respective sections
elsewhere in the reference would be useful. If you use the procedure you learned earlier
today, you can create a link here around the word
Byrd to the page b.html. When your
readers select the link to
b.html, the browser drops them at the top of the Bs. Those
hapless readers then have to scroll down through all the composers whose names start
with B (and there are many of them: Bach, Beethoven, Brahms, Bruckner) to get to Byrda
lot of work for a system that claims to link information so that you can find what you want
quickly and easily.
What you want is to be able to link the word
Byrd in m.html directly to the section for Byrd

in
b.html. Here's the relevant part of b.html you want to link. (I've deleted all the Bs before
Byrd to make the file shorter for this example. Pretend they're still there.)
Note
In this example, you'll see the use of the <em> tag. This tag is used to specify
text that should be emphasized. The emphasis usually is done by rendering
the text italic in Netscape and Internet Explorer.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" /><html>
<head>
<title>Classical Music: B</title>
</head>
<body>
<h1>B</h1>
<! I've deleted all the Bs before Byrd to make things shorter >
<h2><a name="Byrd">Byrd, William, 1543-1623</a></h2>
file:///G|/1/0672328860/ch05lev1sec4.html (4 von 8) [19.12.2006 13:48:40]