Linking to Specific Places Within Documents <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> Madrigals, Masses, Motets</p> </body> </html> You'll need to create an anchor at the section heading for Byrd. You then can link to that anchor from the See Alsos in the file for M. As I described earlier today, 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've decided on the two parts, you can create the anchor itself 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 elementsuch as a heading or paragraphalways 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> file:///G|/1/0672328860/ch05lev1sec4.html (5 von 8) [19.12.2006 13:48:40] Linking to Specific Places Within Documents 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> If you're still confused, refer to Appendix B, "HTML 4.01 Quick Reference," which has a summary of all the HTML tags and rules for which tags can and cannot go inside each one. 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 itself, 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. Caution 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 separate the page and the anchor in the link. Anchor names should never have hash signs in them. file:///G|/1/0672328860/ch05lev1sec4.html (6 von 8) [19.12.2006 13:48:40] Linking to Specific Places Within Documents 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 5.13 shows the Madrigals section with the link to Byrd ready to be selected. Figure 5.13. The Madrigals section with a link to Byrd. [View full size image] Figure 5.14 shows the screen that pops up when you select the Byrd link. 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. Figure 5.14. The Byrd section. [View full size image] file:///G|/1/0672328860/ch05lev1sec4.html (7 von 8) [19.12.2006 13:48:40] Linking to Specific Places Within Documents 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 current page and scrolls to the appropriate section. You'll get a chance to see this feature in action in Lesson 6. There, you'll create a complete web page that includes a table of contents at the beginning. From this table of contents, the reader can jump to different sections 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. file:///G|/1/0672328860/ch05lev1sec4.html (8 von 8) [19.12.2006 13:48:40] Anatomy of a URL file:///G|/1/0672328860/ch05lev1sec5.html [19.12.2006 13:48:40] Kinds of URLs Kinds of URLs Many kinds of URLs are defined by the Uniform Resource Locator specification. (See Appendix A, "Sources for 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 documents on the Web. HTTP, which stands for Hypertext Transfer Protocol, is the protocol that World Wide Web servers use to communicate with web browsers. HTTP URLs follow this basic URL form: http://www.example.com/home/foo/ 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: http://www.foo.com/home/foo/index.html http://www.foo.com/home/foo/homepage.html Using HTTP URLs such as the following, where foo is a directory, is also usually acceptable: http://www.foo.com/home/foo 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. Some older servers, however, might have difficulties resolving this URL, so you should always identify directories and files explicitly and make sure that a default file is available if you're indicating a directory. Anonymous FTP FTP URLs are used to point to files located on FTP serversusually 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: ftp://ftp.foo.com/home/foo ftp://ftp.foo.com/home/foo/homepage.html file:///G|/1/0672328860/ch05lev1sec6.html (1 von 5) [19.12.2006 13:48:41] Kinds of URLs 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. Note 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 connection, 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. Although your browser uses FTP to fetch the file, if it's an HTML file, your browser will display it just as it would were it fetched using the HTTP protocol. 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 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 formand 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 you're done. Depending on how the user's browser and email client are configured, mailto links might not work at all for them. The mailto URL is different from the standard URL form. It looks like the following: file:///G|/1/0672328860/ch05lev1sec6.html (2 von 5) [19.12.2006 13:48:41] Kinds of URLs mailto:internet_e-mail_address Here's an example: mailto:lemay@lne.com Note If your email address includes a percent sign (%), you'll have to use the escape character % 25 instead. Percent signs are special characters to URLs. Unlike the other URLs described here, the mailto URL works strictly on the client side. The mailto link just tells the browser to compose an email message to the specified address. It's up to the browser to figure out how that should happen. Most browsers will also let you add a default subject to the email by including it in the URL like this: mailto:lemay@lne.com?subject=Hi there! When the user clicks on the link, most browsers will automatically stick Hi there! in the subject of the message. Some even support putting body text for the email message in the link, like this: mailto:lemay@lne.com?subject=Hi there!&body=Body text. Usenet Newsgroups Usenet news URLs have one of two forms: news:name_of_newsgroup news:message-id The first form is used to read an entire newsgroup, such as comp.infosystems.www.authoring.html or alt. gothic . If your browser supports Usenet news URLs (either directly or through a newsreader), it'll provide you with a list of available articles in that newsgroup. The second form enables you to retrieve a specific news article. Each news article has a unique ID, called a message ID, which usually looks something like the following: <lemayCt76Jq.CwG@netcom.com> To use a message ID in a URL, remove the angle brackets and include the news: part: news:lemayCt76Jq.CwG@netcom.com file:///G|/1/0672328860/ch05lev1sec6.html (3 von 5) [19.12.2006 13:48:41] Kinds of URLs Be aware that news articles don't exist foreverthey expire and are deleted. So, a message ID that was valid at one point can become invalid a short time later. If you want a permanent link to a news article, you should just copy the article to your web presentation and link it as you would any other file. Both forms of URL assume that you're reading news from an NNTP server, and they can be used only if you have defined an NNTP server somewhere in an environment variable or preferences file for your browser. Therefore, news URLs are most useful simply for reading specific news articles locally, not necessarily for using in links in pages. Caution News URLs, like mailto URLs, might not be supported by all browsers. File File URLs are intended to reference files contained on the local disk. In other words, they refer to files located on the same system as the browser. For local files, file URLs take one of these two forms: the first with an empty hostname (three slashes rather than two) or with the hostname as localhost: file:///dir1/dir2/file file://localhost/dir1/dir2/file Depending on your browser, one or the other will usually work. (If you're in doubt, you can open the file from within your browser and look at the address bar to see what its file: URL is.) File URLs are very similar to FTP URLs. In fact, if the host part of a file URL is not empty or localhost, your browser will try to find the given file by using FTP. Both of the following URLs result in the same file being loaded in the same way: file://somesystem.com/pub/dir/foo/file.html ftp://somesystem.com/pub/dir/foo/file.html Probably the best use of file URLs is in startup pages for your browser (which are also called home pages). In this instance, because you'll almost always be referring to a local file, using a file URL makes sense. The problem with file URLs is that they reference local files, where local means on the same system as the browser pointing to the filenot the same system from which the page was retrieved! If you use file URLs as links in your page, and someone from elsewhere on the Internet encounters your page and tries to follow those links, that person's browser will attempt to find the file on her local disk (and generally will fail). Also, because file URLs use the absolute pathname to the file, if you use file URLs in your page, you can't move that page elsewhere on the system or to any other system. If your intention is to refer to files that are on the same file system or directory as the current page, use relative pathnames rather than file URLs. With relative pathnames for local files and other URLs for remote files, you shouldn't need to use a file URL at all. file:///G|/1/0672328860/ch05lev1sec6.html (4 von 5) [19.12.2006 13:48:41] Kinds of URLs file:///G|/1/0672328860/ch05lev1sec6.html (5 von 5) [19.12.2006 13:48:41] . you use in the name attribute and the anchor name in the link after the # are identical. Caution A common mistake is to put a hash sign in both the anchor name and in the link to that anchor normal text within a paragraph, you'd just surround the whole line with < ;a& gt;. But when you're adding an anchor to a big section of text that's also contained within an elementsuch. 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