ptg TABLE 5.2 Continued Tag Attribute Use value Resets the numbering in the middle of an ordered ( <ol>) list. This attribute is depre- cated in HTML 4.01. <dl> </dl> A glossary or definition list. Items in the list consist of pairs of elements: a term and its definition. <dt> </dt> The term part of an item in a glossary list. Closing tag is optional in HTML but required in XHTML 1.0. <dd> </dd> The definition part of an item in a glossary list. Closing tag is optional in HTML but required in XHTML 1.0. TABLE 5.3 CSS Properties from Lesson 5 Property Use/Values list-style-type Used to specify the bullet style or numbering style for the list. Valid values are disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, and none. list-style-image The image to use in place of the bullets for a list. The value should be the URL of the image. list-style-position Defines the alignment of lines of text in list items after the first. Values are inside and outside. list-style Enables you to set multiple list properties at once: list style type, list style position, and the URL of the bullet style. Workshop You’ve learned how to create and customize lists in HTML. In this section, you see the answers to some common questions about lists, and some exercises that should help you remember the things you’ve learned. Q&A Q My glossaries came out formatted really strangely! The terms are indented farther in than the definitions! A Did you mix up the <dd> and <dt> tags? The <dt> tag is always used first (the def- inition term), and the <dd> follows (the definition). I mix them up all the time. There are too many d tags in glossary lists. 96 LESSON 5: Organizing Information with Lists Download from www.wowebook.com ptg Q Is it possible to change the amount that list items are indented or remove the indentation entirely? A Yes, the properties used to control list indentation are margin-left and padding- left. Some browsers use one and some use the other, so you need to set both of them to change the indentation for your lists. If you set them both to zero, the text in the list will be aligned with the left side of the container, and the bullets or num- bers will actually be outside the container. Q I’ve seen HTML files that use <li> outside a list structure, alone on the page, like this: <li>And then the duck said, “put it on my bill”</li> A Most browsers at least accept this tag outside a list tag and format it either as a simple paragraph or as a nonindented bulleted item. According to the true HTML specification, however, using an <li> outside a list tag is illegal, so good HTML pages shouldn’t do this. Enclosing list items within list tags is also required by the XHTML recommendation. Always put your list items inside lists where they belong. Quiz 1. Ordered and unordered lists use the <li> tag for list items; what tags are used by definition lists? 2. Is it possible to nest an ordered list within an unordered list or vice versa? 3. Which attribute is used to set the starting number for an ordered list? What about to change the value of an element within a list? 4. What are the three types of bullets that can be specified for unordered lists using the list-style-type CSS property? Quiz Answers 1. Definition lists use the <dt> and <dd> tags for list items. 2. Yes, you can nest ordered lists within unordered lists or vice versa. You can also nest lists of the same type, too. 3. With the <ol> tag, the start attribute is used to specify the starting value for the list. To change the numbering within a list, the value attribute is used. Subsequent items are numbered from the most recent value that’s specified. 4. The bullet types supported by the list-style-type property are disc, circle, and square. The default is disc. Workshop 97 5 Download from www.wowebook.com ptg Exercises 1. Use nested lists to create an outline of the topics covered in this book so far. 2. Use nested lists and the list-style-type CSS property to create a traditional out- line of the topics you plan to cover on your own website. 98 LESSON 5: Organizing Information with Lists Download from www.wowebook.com ptg LESSON 6 Adding Links to Your Web Pages After finishing the preceding lesson, you now have a couple of pages that have some headings, text, and lists in them. These pages are all well and good but rather boring. The real fun starts when you learn how to create hypertext links and link your pages to the Web. In this lesson, you learn just that. Specifically, you learn about the following: n All about the HTML link tag (<a>) and its various parts n How to link to other pages on your local disk by using relative and absolute pathnames n How to link to other pages on the Web by using URLs n How to use links and anchors to link to specific places inside pages n All about URLs: the various parts of the URL and the kinds of URLs you can use Download from www.wowebook.com ptg Creating Links To create a link in HTML, you need two things: n The name of the file (or the URL of the file) to which you want to link n 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 in this lesson.) 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 5, “Organizing Information with 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 displays. That’s the text you or your readers will click to follow the link to the URL in the href attribute. Figure 6.1 shows the parts of a typical link using the <a> tag, including the href, the text of the link, and the closing tag. 100 LESSON 6: Adding Links to Your Web Pages Download from www.wowebook.com ptg The following example shows a simple link and what it looks like (see Figure 6.2): Input ▼ Go back to <a href=”menu.html”>Main Menu</a> Creating Links 101 6 FIGURE 6.1 A link on a web page. <A HREF=" /menu.html">Go back to Main Menu</A> Text that will be highlighted File to load when link is selected Closing tagOpening tag FIGURE 6.2 How a browser dis- plays a link. Output . ▼ Task: Exercise 6.1: Linking Two Pages Now you can try a simple example with two HTML pages on your local disk. You need your text editor and your web browser for this exercise. Because both the pages you work with are on your local disk, you don’t need to connect 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 for this section, called menu.html and claudius.html. What your two pages look like or what they’re called doesn’t matter. However, make sure that you insert your own filenames if you follow along with this example. The following is the first file, called menu.html: <!DOCTYPE html><html> <head> , Download from www.wowebook.com ptg <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 turn them into links later. The following is the second file, claudius.html: <!DOCTYPE html><html> <head> <title>The Twelve Caesars: Claudius</title> </head> <body> <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> 102 LESSON 6: Adding Links to Your Web Pages , , Download from www.wowebook.com ptg 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 (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 6.3 shows how it looked when I opened it. Now, when you click the link, your browser should load and display the claudius.html page, as shown in Figure 6.4. Creating Links 103 6 , , 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. CAUTION Download from www.wowebook.com ptg 104 LESSON 6: Adding Links to Your Web Pages FIGURE 6.4 The claudius.html page. If 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 that 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. 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> FIGURE 6.3 The menu.html file with link. , , Download from www.wowebook.com ptg 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 navi- gate to that file if you started at the current directory or folder. A pathname might, for Linking Local Pages Using Relative and Absolute Pathnames 105 6 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> Improper nesting of tags is invalid and could prevent your page from displayinf prop- erly, so always make sure that you close the most recently opened tag first. Now when you reload the Claudius file, the link will be active, and you can jump between the menu and the detail page by clicking on those links. Linking Local Pages Using Relative and Absolute Pathnames The example in the preceding section shows how to link together pages that are con- tained in the same folder or directory on your local disk (local pages). This section con- tinues that thread, linking pages that are still on the local disk but might be contained in different directories or folders on that disk. ▲ Folders and directories are the same thing, but they’re called dif- ferent 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. NOTE , Download from www.wowebook.com . optional in HTML but required in XHTML 1. 0. <dd> </dd> The definition part of an item in a glossary list. Closing tag is optional in HTML but required in XHTML 1. 0. TABLE 5.3 CSS Properties. Use/Values list-style-type Used to specify the bullet style or numbering style for the list. Valid values are disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, and none. list-style-image. 6.2): Input ▼ Go back to <a href=”menu .html >Main Menu</a> Creating Links 10 1 6 FIGURE 6 .1 A link on a web page. <A HREF=" /menu .html& quot;>Go back to Main Menu</A> Text