Creating LinksTo create a link in HTML, you need two things: ● The name of the file or the URL of the file to which you want to link ● The text that will serve as the clickable link Only
Trang 1Creating Links
To create a link in HTML, you need two things:
● The name of the file (or the URL of the file) to which you want to link
● The text that will serve as the clickable link
Only the text included within the link tag is actually visible on your page When your readers click on the link, the browser loads the URL associated with the link
The Link Tag <a>
To create a link in an HTML page, you use the HTML link tag <a> </a> The <a> tag often is called an
anchor tag because it also can be used to create anchors for links (You'll learn more about creating
anchors later today.) The most common use of the link tag, however, is to create links to other pages
Unlike the simple tags you learned about in the preceding lesson, the <a> tag has some extra features: the opening tag, <a>, includes both the name of the tag (a) and extra information about the link itself
The extra features are called attributes of the tag (You first discovered attributes in Lesson 4, "Learning the Basics of HTML," when you learned about lists.) So, rather than the opening <a> tag having just a name inside brackets, it looks something like the following:
<a name="Up" href="menu.html" title="The Twelve Caesars">
The extra attributes (in this example, name, HRef, and title) describe the link itself The attribute you'll probably use most often is the href attribute, which is short for hypertext reference You use the href
attribute to specify the name or URL of the file to which this link points
Like most HTML tags, the link tag also has a closing tag, </a> All the text between the opening and closing tags will become the actual link on the screen and be highlighted, underlined, or colored blue or red when the web page is displayed That's the text you or your readers will click to follow the link to the URL in the href attribute
Figure 5.1 shows the parts of a typical link using the <a> tag, including the href, the text of the link, and the closing tag
Figure 5.1 A link on a web page.
Trang 2The following example shows a simple link and what it looks like (see Figure 5.2).
Input
Go back to <a href="menu.html">Main Menu</a>
Output
Figure 5.2 How a browser displays a link.
Task: Exercise 5.1 Linking Two Pages
Trang 3Now you can try a simple example with two HTML pages on your local disk You'll need your text editor and your web browser for this exercise Because both the pages you'll work with are on your local disk, you don't need to be connected to the Internet (Be patient; you'll get to do network stuff in the next section.)
Create two HTML pages and save them in separate files Here's the code for the two HTML files I created for this section, which I called menu.html and claudius.html What your two pages look like or what they're called really doesn't matter However, make sure that you insert your own filenames if you're following along with this example
The following is the first file, called menu.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html>
<head>
<title>The Twelve Caesars</title>
</head>
<body>
<h1>"The Twelve Caesars" by Suetonius</h1>
<p>Seutonius (or Gaius Suetonius Tranquillus) was born circa A.D 70
and died sometime after A.D 130 He composed a history of the twelve
Caesars from Julius to Domitian (died A.D 96) His work was a
significant contribution to the best-selling novel and television
series "I, Claudius." Suetonius' work includes biographies of the
following Roman emperors:</p>
<ul>
<li>Julius Caesar</li>
<li>Augustus</li>
<li>Tiberius</li>
<li>Gaius (Caligula)</li>
<li>Claudius</li>
<li>Nero</li>
<li>Galba</li>
<li>Otho</li>
<li>Vitellius</li>
<li>Vespasian</li>
<li>Titus</li>
<li>Domitian</li>
</ul>
</body>
</html>
The list of menu items (Julius Caesar, Augustus, and so on) will be links to other pages For now, just type them as regular text; you'll turn them into links later
The following is the second file, claudius.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html>
<head>
<title>The Twelve Caesars: Claudius</title>
Trang 4<h2>Claudius Becomes Emperor</h2>
<p>Claudius became Emperor at the age of 50 Fearing the attack of
Caligula's assassins, Claudius hid behind some curtains After a guardsman discovered him, Claudius dropped to the floor, and then found himself
declared Emperor.</p>
<h2>Claudius is Poisoned</h2>
<p>Most people think that Claudius was poisoned Some think his wife
Agrippina poisoned a dish of mushrooms (his favorite food) His death
was revealed after arrangements had been made for her son, Nero, to
succeed as Emperor.</p>
<p>Go back to Main Menu</p>
</body>
</html>
Make sure that both of your files are in the same directory or folder If you haven't called them menu.html and claudius.html, make sure that you take note of the names because you'll need them later
Create a link from the menu file to the feeding file Edit the menu.html file, and put the cursor at the following line:
<li>Claudius</li>
Link tags don't define the format of the text itself, so leave in the list item tags and just add the link inside the item First, put in the link tags themselves (the <a> and </a> tags) around the text that you want to use as the link:
<li><a>Claudius</a></li>
Now add the name of the file that you want to link to as the HRef part of the opening link tag Enclose the name of the file in quotation marks (straight quotes ["], not curly or
typesetter's quotes ["]), with an equal sign between HRef and the name Filenames in links are case sensitive, so make sure that the filename in the link is identical to the name of the file you created (Claudius.html is not the same file as claudius.html; it has to be exactly the same case.) Here I've used claudius.html; if you used different files, use those
filenames
<li><a href="claudius.html">Claudius</a></li>
Now, start your browser, select Open File (or its equivalent in your browser), and open the
menu.html file The paragraph you used as your link should now show up as a link that is in
a different color, underlined, or otherwise highlighted Figure 5.3 shows how it looked when
I opened it
[View full size image]
Trang 5Now, when you click the link, your browser should load and display the claudius.html
page, as shown in Figure 5.4
[View full size image]
Trang 6If your browser can't find the file when you click on the link, make sure that the name of the file in the href part of the link tag is the same as the name of the file on the disk, uppercase and lowercase match, and both files are in the same directory Remember to close your link, using the </a> tag, at the end of the text that serves as the link Also, make sure that you have quotation marks at the end of the filename (sometimes you can easily forget) and both quotation marks are ordinary straight quotes All these things can confuse the browser and prevent it from finding the file or displaying the link properly
Caution
Don't be confused by this issue of case sensitivity Tags in HTML aren't case
sensitive (although XHTML 1.0 requires that tags be lowercase) However,
filenames refer to files on a web server somewhere, and because web servers often run on operating systems in which filenames are case sensitive (such as UNIX), you should make sure that the case of letters in your links' filenames is correct
Now you can create a link from the feeding page back to the menu page A paragraph at the end of the claudius.html page is intended for just this purpose:
<p>Go back to Main Menu</p>
Add the link tag with the appropriate href to that line, such as the following in which menu html is the original menu file:
<p><a href="menu.html">Go back to Main Menu</a></p>
Nesting Tags Properly
When you include tags inside other tags, make sure that the closing tag closes
the tag that you most recently opened That is, enter
<p> <a> </a> </p>
rather than
<p> <a> </p> </a>
Some browsers can become confused if you overlap tags in this way, so always
make sure that you close the most recently opened tag first
Trang 7Now when you reload the Claudius file, the link will be active, and you can jump between
the menu and the detail page by selecting those links
Trang 8Linking Local Pages Using Relative and Absolute Pathnames
The example in the preceding section shows how to link together pages that are contained in the same folder or directory on your local disk (local pages) This section continues that thread, linking pages that are still on the local disk but might be contained in different directories or folders on that disk
Note
Folders and directories are the same thing, but they're called different names depending on
whether you're on Macintosh, Windows, or UNIX I'll simply call them directories from now
on to make your life easier
When you specify just the filename of a linked file within quotation marks, as you did earlier, the
browser looks for that file in the same directory as the current file This is true even if both the current file and the file being linked to are on a server somewhere else on the Internet; both files are contained
in the same directory on that server It is the simplest form of a relative pathname
Relative pathnames point to files based on their locations relative to the current file They can include
directory names, or they can point to the path you would take to navigate to that file if you started at the current directory or folder A pathname might, for 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-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 5.1 shows some examples of relative pathnames and where they lead
Table 5.1 Relative Pathnames
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
Trang 9If 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
When you want to link to a file on a local drive on the Macintosh, the name of the disk is used just as it appears on the disk itself Assume that you have a disk called Hard Disk 2, and your HTML files are contained in a folder called HTML Files If you want to link to a file called jane.html in a folder called
Public on a shared disk called Jane's Mac, you can use the following relative pathname:
href=" / /Jane's Mac/Public/jane.html"
When linking to a file on a local drive on Windows systems, you refer to the drives by letter, just as you would expect However, rather than using c:, d:, and so on, substitute a pipe (|) for the colon (the colon is already used to separate the scheme from the host name in URLs) The pipe looks like two vertical dashes stacked on top of each other, and is usually found on the backslash key Don't forget to use forward slashes as you would with UNIX So, if the current file is located in C:\FILES\HTML\, and you want to link to D:\FILES.NEW\HTML\MORE\INDEX.HTM, the relative pathname to that file is as follows:
href=" / /d|/files.new/html/more/index.htm"
In most instances, you'll never use the name of a disk in relative pathnames, but I've included it here for completeness After you deploy your pages to the Web, links that include drive names won't work, so
it makes more sense to use relative links, which are more portable
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 intervening 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
Note
Top has different meanings, depending on how you're publishing your HTML files If you're
just linking 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're publishing 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'll learn more about absolute pathnames and web servers in
Lesson 18, "Putting Your Site Online."
Table 5.2 shows some examples of absolute pathnames and what they mean
Trang 10Table 5.2 Absolute Pathnames
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 directories
files/html (on DOS systems)
href="/Hard%20Disk%201/HTML Files/file.html" file.html is located on the disk Hard Disk 1, in the
folder HTML Files (typically on Macintosh 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
I can explain this better with an example 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