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: http://exammple.com ftp://example.com Anatomy of a URL 121 6 FIGURE 6.15 URL parts. http://daytona.raceway.com/home/www/files/race.html 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: 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, %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: 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, 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: http://myhost.com/harddrive/A||%20My%20Files/www/file.html 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: http://www.example.com/home/foo/ 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: 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. 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: 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 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: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 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 . enter <h2><a name=”byrd”>Byrd, William, 15 43 -1 6 23</a></h2> but do not enter <a name=”byrd”><h2>Byrd, William, 15 43 -1 6 23</h2></a> The second example can. 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, 15 43 -1 6 23</a></h2> <ul> <li>Madrigals <ul> <li><em>This. there.) <!DOCTYPE html& gt;< ;html& gt; <head> <title>Classical Music: B</title> </head> <body> 11 6 LESSON 6: Adding Links to Your Web Pages FIGURE 6 .12 Part M of the Online