B Byrd, William, 1543-1623 Madrigals This Sweet and Merry Month of May Though Amaryllis Dance Lullabye, My Sweet Little Baby Masses Mass for Five Voices Mass for Four Voices Mass f
Trang 1Figure 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 Byrdto 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 Byrdinm.htmldirectly to the section for Byrd in
b.html Here’s the relevant part of b.htmlyou want to link (I’ve deleted all the Bs
beforeByrdto make the file shorter for this example Pretend they’re still there.)
<!DOCTYPE html><html>
<head>
<title>Classical Music: B</title>
</head>
<body>
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
Trang 2<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 fredin 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 byrdbecausebyrdcan 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 Byrdsection 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
6
Trang 3element—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 Alsoline in your m.htmlfile:
<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.htmlpage, the hrefis 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 binbyrd Anchor names and links are case-sensitive; if you put #Byrdin
yourhref, the link might not work properly Make sure that the anchor name you use in
thenameattribute and the anchor name in the link after the #are identical
Trang 4So, with the new link to the new section, the See Alsoline 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
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.
Trang 5Linking 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 section5in 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 concon-tents, 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
, FIGURE 6.14
The Byrd section.
▲
Trang 6As 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 ftpURL 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:
http://exammple.com
ftp://example.com
6
FIGURE 6.15
URL parts.
http://daytona.raceway.com/home/www/files/race.html
Directory and filename Protocol
Hostname
Trang 7It’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:
http://my-public-access-unix.com: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
http://www.example.com:80/ and http://www.example.com/ 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,
%20is a space, %3fis a question mark, and %2fis 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:
http://myhost.com/harddrive/All 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,
Trang 8however, some browsers might have problems with them and not recognize the pathname
correctly For full compatibility with all browsers, use %20, as follows:
http://myhost.com/harddrive/A||%20My%20Files/www/file.html
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:
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 Spespe-cial 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
Trang 9If 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.htmlis 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:
http://www.foo.com/home/foo/index.html
http://www.foo.com/home/foo/homepage.html
Using HTTP URLs such as the following, where foois a directory, is also usually
acceptable:
http://www.foo.com/home/foo
In this case, because foois 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 anonymousas the login ID and
your email address as the password FTP URLs also follow the standard URL form, as
shown in the following examples:
ftp://ftp.foo.com/home/foo
ftp://ftp.foo.com/home/foo/homepage.html
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 foodirectory The second
URL retrieves and parses the file homepage.htmlin the foodirectory
Trang 10Although 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:password@ftp.foo.com/home/foo/homepage.html
In this form of the URL, the usernamepart 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
ThemailtoURL is used to send electronic mail If the browser supports mailtoURLs,
when a link that contains one is selected, the browser will prompt you for a subject and
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