Tự học HTML và CSS trong 1 giờ - part 15 ppt
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (740.13 KB, 10 trang )
ptg
Figure 6.12 shows how this section looks when it displays.
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,
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 Byrd—a 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 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.)
<!DOCTYPE html><html>
<head>
<title>Classical Music: B</title>
</head>
<body>
116
LESSON 6: Adding Links to Your Web Pages
FIGURE 6.12
Part M of the
Online Music
Reference.
Output .
, ,
In this example, you 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 the browser. I used it rather
than the
<i> tag because it describes the meaning I intend to
convey rather than just describing a physical style for text on the
page.
NOTE
Download from www.wowebook.com
ptg
<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>
<ul>
<li>Madrigals
<ul>
<li><em>This Sweet and Merry Month of May</em></li>
<li><em>Though Amaryllis Dance</em></li>
<li><em>Lullabye, My Sweet Little Baby</em></li>
</ul>
</li>
<li>Masses
<ul>
<li><em>Mass for Five Voices</em></li>
<li><em>Mass for Four Voices</em></li>
<li><em>Mass for Three Voices</em></li>
</ul>
</li>
<li>Motets
<ul>
<li><em>Ave verum corpus a 4</em></li>
</ul>
</li>
</ul>
<p><em>See Also</em>
Byrd, Gibbons, Lassus, Monteverdi, Morley, Weelkes, Wilbye</p>
</body>
</html>
You need to create an anchor at the section heading for Byrd. You then can link to that
anchor from the See Also instances in the file for M.
As described earlier in this lesson, you need two elements for each anchor: an anchor
name and the text inside the link to hold that anchor (which might be highlighted in
some browsers). The latter is easy; the section heading itself works well because it’s the
element to which you’re actually linking.
You can choose any name you want for the anchor, but each anchor in the page must be
unique. (If you have two or more anchors with the name fred in the same page, how
would the browser know which one to choose when a link to that anchor is selected?) A
good, unique anchor name for this example is simply byrd because byrd can appear only
one place in the file, and this is it.
After you decide on the two parts, you can create the anchor in your HTML file. Add the
<a> tag to the William Byrd section heading, but be careful here. If you were working
with normal text within a paragraph, you’d just surround the whole line with <a>. But
when you’re adding an anchor to a big section of text that’s also contained within an
Linking to Specific Places Within Documents
117
6
, ,
Download from www.wowebook.com
ptg
element—such as a heading or paragraph—always put the anchor inside the element. In
other words, enter
<h2><a name=”byrd”>Byrd, William, 1543-1623</a></h2>
but do not enter
<a name=”byrd”><h2>Byrd, William, 1543-1623</h2></a>
The second example can confuse your browser. Is it an anchor, formatted just like the
text before it, with mysteriously placed heading tags? Or is it a heading that also happens
to be an anchor? If you use the right code in your HTML file, with the anchor inside the
heading, you avoid the confusion. The easiest answer is probably just putting the anchor
ahead of the heading tag, like this:
<a name=”byrd”></a>
<h2>Byrd, William, 1543-1623</h2>
So, you’ve added your anchor to the heading and its name is “byrd”. Now go back to the
See Also line in your m.html file:
<p><em>See Also</em>
Byrd, Gibbons, Lassus, Monteverdi, Morley, Weelkes, Wilbye</p>
You’re going to create your link here around the word Byrd, just as you would for any
other link. But what’s the URL? As you learned previously, pathnames to anchors look
similar to the following:
page_name#anchor_name
If you’re creating a link to the b.html page, the href is as follows:
<a href=”b.html”>
Because you’re linking to a section inside that page, add the anchor name to link that
section so that it looks like this:
<a href=”b.html#byrd”>
Note the small b in byrd. Anchor names and links are case-sensitive; if you put #Byrd in
your href, the link might not work properly. Make sure that the anchor name you use in
the name attribute and the anchor name in the link after the # are identical.
118
LESSON 6: Adding Links to Your Web Pages
, ,
Download from www.wowebook.com
ptg
So, with the new link to the new section, the See Also line looks like this:
<p><em>See Also</em>
<a href=”b.html#byrd”>Byrd</a>,
Gibbons, Lassus, Monteverdi, Morley, Weelkes, Wilbye</p>
Of course, you can go ahead and add anchors and links to the other parts of the reference
for the remaining composers.
With all your links and anchors in place, test everything. Figure 6.13 shows the
Madrigals section with the link to Byrd ready to be selected.
Figure 6.14 shows the screen that pops up when you select the Byrd link. If the page fits
entirely within the window, the browser will not move down to the anchor, so you may
need to reduce the size of your browser window to see how the link to the anchor takes
you to the correct spot on the page.
Linking to Specific Places Within Documents
119
6
, ,
A common mistake is to put a hash sign in both the anchor name
and in the link to that anchor. You use the hash sign only to sepa-
rate the page and the anchor in the link. Anchor names should
never have hash signs in them.
CAUTION
FIGURE 6.13
The Madrigals sec-
tion with a link to
Byrd.
Download from www.wowebook.com
ptg
Linking to Anchors in the Same Document
What if you have only one large page, and you want to link to sections within that page?
You can use anchors for it, too. For larger pages, using anchors can be an easy way to
jump around within sections. To link to sections, you just need to set up your anchors at
each section the way you usually do. Then, when you link to those anchors, leave off the
name of the page itself but include the hash sign and the name of the anchor. So, if
you’re linking to an anchor name called section5 in the same page as the link, the link
looks like the following:
Go to <a href=”#section5”>The Fifth Section</a>
When you leave off the page name, the browser assumes that you’re linking with the cur-
rent page and scrolls to the appropriate section. You’ll get a chance to see this feature in
action in Lesson 7. There, you create a complete web page that includes a table of con-
tents at the beginning. From this table of contents, the reader can jump to different sec-
tions in the same web page. The table of contents includes links to each section heading.
In turn, other links at the end of each section enable the user to jump back to the table of
contents or to the top of the page.
Anatomy of a URL
So far in this book, you’ve encountered URLs twice: in Lesson 1, “Navigating the World
Wide Web,” as part of the introduction to the Web; and in this lesson, when you created
links to remote pages. If you’ve ever done much exploring on the Web, you’ve encoun-
tered URLs as a matter of course. You couldn’t start exploring without a URL.
120
LESSON 6: Adding Links to Your Web Pages
,
FIGURE 6.14
The Byrd section.
▲
Download from www.wowebook.com
ptg
As I mentioned in Lesson 1, URLs are uniform resource locators. In effect, URLs are
street addresses for bits of information on the Internet. Most of the time, you can avoid
trying to figure out which URL to put in your links by just navigating to the bit of infor-
mation you want with your browser, and then copying and pasting the long string of gob-
bledygook into your link. But understanding what a URL is all about and why it has to
be so long and complex is often useful. Also, when you put your own information up on
the Web, knowing something about URLs will be useful so that you can tell people
where your web page is.
In this section, you learn what the parts of a URL are, how you can use them to get to
information on the Web, and the kinds of URLs you can use (HTTP, FTP, Mailto, and
so on).
Parts of URLs
Most URLs contain (roughly) three parts: the protocol, the hostname, and the directory
or filename (see Figure 6.15).
The protocol is the way in which the page is accessed; that is, the means of communica-
tion your browser uses to get the file. If the protocol in the URL is http, the browser will
attempt to use the Hypertext Transfer Protocol (HTTP) to talk to the server. For a link to
work, the host named in the link must be running a server that supports the protocol
that’s specified. So if you use an ftp URL to connect to www.example.com, the link
won’t work if that server isn’t running File Transfer Protocol (FTP) server software.
The hostname is the address of the computer on which the information is stored, like
www.google.com, ftp.apple.com, or www.aol.com. The same hostname can support more
than one protocol, as follows:
Anatomy of a URL
121
6
FIGURE 6.15
URL parts.
/>Directory and filenameProtocol
Hostname
Download from www.wowebook.com
ptg
It’s one machine that offers two different information services, and the browser will use
different methods of connecting to each. So long as both servers are installed and avail-
able on that system, you won’t have a problem.
The hostname part of the URL might include a port number. The port number tells your
browser to open a connection using the appropriate protocol on a specific network port.
The only time you’ll need a port number in a URL is if the server responding to the
request has been explicitly installed on that port. If the server is listening on the default
port, you can leave the port number out. This issue is covered in Lesson 19, “Designing
for the Real World.”
If a port number is necessary, it’s placed after the hostname but before the directory, as
follows:
:1550/pub/file
If the port is not included, the browser tries to connect to the default port number associ-
ated with the protocol in the URL. The default port for HTTP is 80, so a link to
:80/ and are equivalent.
Finally, the directory is the location of the file or other form of information on the host.
The directory does not necessarily point to a physical directory and file on the server.
Some web applications generate content dynamically and just use the directory informa-
tion as an identifier. For the files you work with while learning HTML, the directory
information will point to files that exist on your computer.
Special Characters in URLs
A special character in a URL is anything that is not an upper- or lowercase letter, a num-
ber (0–9), or one of the following symbols: dollar sign ($), dash (-), underscore (_), or
period (.). You might need to specify any other characters by using special URL escape
codes to keep them from being interpreted as parts of the URL itself.
URL escape codes are indicated by a percent sign (%) and a two-character hexadecimal
symbol from the ISO-Latin-1 character set (a superset of standard ASCII). For example,
%20 is a space, %3f is a question mark, and %2f is a slash. (Spaces are also sometimes
encoded as + signs, and + signs are encoded as %2b.)
Suppose that you have a directory named All My Files. Your first pass at a URL with
this name in it might look like the following:
My Files/www/file.html
If you put this URL in quotation marks in a link tag, it might work (but only if you put it
in quotation marks). Because the spaces are considered special characters to the URL,
122
LESSON 6: Adding Links to Your Web Pages
Download from www.wowebook.com
ptg
however, some browsers might have problems with them and not recognize the pathname
correctly. For full compatibility with all browsers, use %20, as follows:
/>Additional Attributes for the <a> Tag
There are some additional attributes for the <a> tag that are less common. These offer the
following:
n
tabindex—Supports a tabbing order so that authors can define an order for
anchors and links, and then users can tab between them the way they do in a dialog
box in Windows or the Mac OS.
n
Event handlers such as onclick, onfocus, and onblur—The full list of events is
included in the section “ Global Attributes and Events “ of Appendix B. You’ll
learn how to use these attributes on Lesson 14, “Introducing JavaScript.”
Kinds of URLs
Many kinds of URLs are defined by the Uniform Resource Locator specification. (See
Appendix A, “Sources of Further Information,” for a pointer to the most recent version.)
This section describes some of the more popular URLs and some situations to look out
for when using them.
HTTP
HTTP URLs are by far the most common type of URLs because they point to other doc-
uments on the Web. HTTP is the protocol that World Wide Web servers use to communi-
cate with web browsers.
HTTP URLs follow this basic URL form:
/>Kinds of URLs
123
6
If you make sure that your file and directory names are short and
use only alphanumeric characters, you won’t need to include spe-
cial characters in URLs. Special characters can be problematic in a
variety of ways. When you’re creating your own pages, you should
avoid using spaces in file names as well as other non-alphanumeric
characters whenever possible.The two exceptions are _ and -, which
are the preferred separators between words in URLs.
CAUTION
Download from www.wowebook.com
ptg
If the URL ends in a slash, the last part of the URL is considered a directory name. The
file that you get using a URL of this type is the default file for that directory as defined
by the HTTP server, usually a file called index.html. If the web page you’re designing
is the top-level file for all a directory’s files, calling it index.html is a good idea. Putting
such a file in place will also keep users from browsing the directory where the file is
located.
You also can specify the filename directly in the URL. In this case, the file at the end of
the URL is the one that is loaded, as in the following examples:
/> />Using HTTP URLs such as the following, where foo is a directory, is also usually
acceptable:
/>In this case, because foo is a directory, this URL should have a slash at the end. Most
web servers can figure out that this is a link to a directory and redirect to the appropriate
file.
Anonymous FTP
FTP URLs are used to point to files located on FTP servers—usually anonymous FTP
servers; that is, the ones that allow you to log in using anonymous as the login ID and
your email address as the password. FTP URLs also follow the standard URL form, as
shown in the following examples:
/> />Because you can retrieve either a file or a directory list with FTP, the restrictions on
whether you need a trailing slash at the end of the URL aren’t the same as with HTTP.
The first URL here retrieves a listing of all the files in the foo directory. The second
URL retrieves and parses the file homepage.html in the foo directory.
124
LESSON 6: Adding Links to Your Web Pages
Download from www.wowebook.com
ptg
Although your browser uses FTP to fetch the file, if it’s an HTML file, your browser will
display it just as it would if it were fetched using HTTP. Web browsers don’t care how
they get files. As long as they can recognize the file as HTML, either because the server
explicitly says that the file is HTML or by the file’s extension, browsers will parse and
display that file as an HTML file. If they don’t recognize it as an HTML file, no big deal.
Browsers can either display the file if they know what kind of file it is or just save the
file to disk.
Non-Anonymous FTP
All the FTP URLs in the preceding section are used for anonymous FTP servers. You
also can specify an FTP URL for named accounts on an FTP server, like the following:
ftp://username:/home/foo/homepage.html
In this form of the URL, the username part is your login ID on the server, and password
is that account’s password. Note that no attempt is made to hide the password in the
URL. Be very careful that no one is watching you when you’re using URLs of this
form—and don’t put them into links that someone else can find!
Furthermore, the URLs that you request might be cached or logged somewhere, either on
your local machine or on a proxy server between you and the site you’re connecting to.
For that reason, it’s probably wise to avoid using this type of non-anonymous FTP URL
altogether.
Mailto
The mailto URL is used to send electronic mail. If the browser supports mailto URLs,
when a link that contains one is selected, the browser will prompt you for a subject and
the body of the mail message, and send that message to the appropriate address when
Kinds of URLs
125
6
Navigating FTP servers using a web browser can often be much
slower than navigating them using FTP itself because the browser
doesn’t hold the connection open. Instead, it opens the connec-
tion, finds the file or directory listing, displays the listing, and then
closes down the FTP connection. If you select a link to open a file
or another directory in that listing, the browser constructs a new
FTP URL from the items you selected, reopens the FTP connection
by using the new URL, gets the next directory or file, and closes it
again. For this reason, FTP URLs are best for when you know
exactly which file you want to retrieve rather than for when you
want to browse an archive.
NOTE
Download from www.wowebook.com
