Tự học HTML và CSS trong 1 giờ - part 14 doc

ptg
example, include directions to go up two directory levels and then go down two other
directories to get to the file.
To specify relative pathnames in links, you must use UNIX-style paths regardless of the
system you actually have. You therefore separate directory or folder names with forward
slashes (/), and you use two dots to refer generically to the directory above the current
one ( ).
Table 6.1 shows some examples of relative pathnames and where they lead.
TABLE 6.1 Relative Pathnames
Pathname Means
href=”file.html” file.html is located in the current directory.
href=”files/file.html” file.html is located in the directory called
files, and the files directory is located in
the current directory.
href=”files/morefiles/file.html” file.html is located in the morefiles
directory, which is located in the files
directory, which is located in the current
directory.
href=” /file.html” file.html is located in the directory one
level up from the current directory (the parent
directory).
href=” / /files/file.html” file.html is located two directory levels up,
in the directory files.
If you’re linking files on a personal computer (Macintosh or PC), and you want to link to
a file on a different disk, use the name or letter of the disk as just another directory name
in the relative path.
Absolute Pathnames
You can also specify the link to another page on your local system by using an absolute
pathname.
Absolute pathnames point to files based on their absolute locations on the file system.
Whereas relative pathnames point to the page to which you want to link by describing its

location relative to the current page, absolute pathnames point to the page by starting at
the top level of your directory hierarchy and working downward through all the interven-
ing directories to reach the file.
Absolute pathnames always begin with a slash, which is the way they’re differentiated
from relative pathnames. Following the slash are all directories in the path from the top
level to the file you are linking.
106
LESSON 6: Adding Links to Your Web Pages
Download from www.wowebook.com
ptg
Table 6.2 shows some examples of absolute pathnames and what they mean.
TABLE 6.2 Absolute Pathnames Examples
Pathname Means
href=”/u1/lemay/file.html” file.html is located in the
directory
/u1/lemay (typically on
UNIX systems).
href=”/d|/files/html/file.htm” file.htm is located on the D:
disk in the directory files/html
(on Windows systems).
href=”/Macintosh%20HD/HTML Files/file.html” file.html is located on the disk
Hard Disk 1, in the folder HTML
Files (typically on OS X systems).
Using Relative or Absolute Pathnames?
The answer to that question is, “It depends.” If you have a set of files that link only to
other files within that set, using relative pathnames makes sense. On the other hand, if
the links in your files point to files that aren’t within the same hierarchy, you probably
want to use absolute links. Generally, a mix of the two types of links makes the most
sense for complex sites.
Let’s say that your site consists of two sections, /stuff and /things. If you want to link

from the file index.html in /stuff to history.html in /stuff (or any other file in
/stuff), you use a relative link. That way, you can move the /stuff directory around
without breaking any of the internal links. On the other hand, if you want to create a link
in /stuff/index.html to /things/index.html, an absolute link is probably called for.
That way, if you move /stuff to /more/stuff, your link will still work.
The rule of thumb I generally use is that if pages are part of the same collection, I use
relative links, and if they’re part of different collections, I use absolute links.
Linking Local Pages Using Relative and Absolute Pathnames
107
6
Top
has different meanings, depending on how you publish your
HTML files. If you just link to files on your local disk, the top is the
top of your file system (
/ on UNIX, or the disk name on a
Macintosh or PC). When you publish files using a web server, the
top is the directory where the files served by the web server are
stored, commonly referred to as the
document root
. You learn
more about absolute pathnames and web servers in Lesson 20,
“Putting Your Site Online.”
NOTE
Download from www.wowebook.com
ptg
▼
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
Internet—for 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 6.5
shows.
Task: Exercise 6.2: Linking Your Caesar Pages to the Web
Go back to those two pages you linked together earlier, 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 6.6 shows what The First
Caesars page looks like in a browser.
108
LESSON 6: Adding Links to Your Web Pages
FIGURE 6.5
Link to remote
files.
URL of remote file

Closing tag
<A HREF=" Home Page</A>
Opening tag
,
Download from www.wowebook.com
ptg
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 on Lesson 7, “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
Links to Other Documents on the Web
109
6
FIGURE 6.6
The First Caesars
page.
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.
NOTE
, ,

Download from www.wowebook.com
ptg
▼
mistake, your browser won’t find the file on the other end. Many URLs are too complex
for humans remember them; I prefer to copy and paste whenever I can to cut down on
the chances of typing URLs incorrectly.
Figure 6.7 shows how the menu.html file, with the new link in it, looks when it displays.
Task: Exercise 6.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 create a web page for a set of book reviews. This page serves as the
index to the reviews, so the link menu you create is essentially a menu of book names.
110
LESSON 6: Adding Links to Your Web Pages
, ,
FIGURE 6.7
The First Caesars
link.
Output .
▲
Download from www.wowebook.com
ptg

Start with a simple page framework: a first-level heading and some basic explanatory
text:
<!DOCTYPE html><html>
<head>
<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, 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, and Figure 6.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>
Now, modify each of the list items so that they include link tags. You need to keep the
<li> tag in there because it indicates where the list items begin. Just add the <a> tags
Links to Other Documents on the Web
111

6
, ,
FIGURE 6.8
A list of books.
Output .
Download from www.wowebook.com
ptg
around the text itself. Here you 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>
<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 any-
thing 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 6.9.
You use link menus similar to this one throughout this book.
112
LESSON 6: Adding Links to Your Web Pages
FIGURE 6.9
The final menu
listing.
Output .
▲
,
Download from www.wowebook.com
ptg
Linking to Specific Places Within
Documents
The links you’ve created so far in this lesson 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 page—for example, to the fourth major section down?
You can do so in HTML by creating an anchor within the second page. The anchor cre-
ates 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 sec-
ond page and then scroll down to the location of the anchor. (Figure 6.10 shows an
example.)
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 wondered why the link tag uses an <a> rather than an <l>, now you know: a actu-
ally stands for anchor.
Linking to Specific Places Within Documents
113
6
FIGURE 6.10
Links and anchors.
softfruits.html berries.html
Please choose a subtopic:
Soft Fruits
*Strawberries
*Cane Fruits:
*Bush Fruits:
*Blackberries
*Raspberries
*Loganberries
*Blueberries
*Huckleberries
Strawberries are an
herbaceous plant
Strawberries
Blackberries
Blueberries
Blackberries grow on canes
Blueberries grow on bushes

in colder climates
Download from www.wowebook.com
ptg
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 6.11 shows the parts of the <a> tag when used to indicate an
anchor.
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 follows:
<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 lower-
case characters!), like the following:
<a href=”mybigdoc.html#part4”>Go to Part 4</a>
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.
114

LESSON 6: Adding Links to Your Web Pages
FIGURE 6.11
The <a> tag and
anchors.
< a name="Part4">Part Four: Planting Corn</a>
Text that will be at the
top of the screen
Anchor name
to link to
Closing tagOpening tag
Download from www.wowebook.com
ptg
▼
Task: Exercise 6.4: Linking Sections Between Two Pages
Now let’s create an example with two pages. These two pages are part of an online refer-
ence to classical music, in which each web page contains all the references for a particu-
lar 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, and 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 18, “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><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, Lassus, Monteverdi, Morley, Weelkes, Wilbye </p>
</body
</html>
Linking to Specific Places Within Documents
115
6
,
Download from www.wowebook.com