|
To access the contents, click the chapter and section titles.
HTML 4.0 Sourcebook
ListsHaving beaten paragraphs into the ground, we now move on to the next component, namely the list of items seen in Figures 1.2 and 1.3. HTML supports several types of lists, the example here being an unordered (bulleted) list. An unordered list element begins with the tag <UL> and ends with a </UL>: <UL> <LI>One item of the list, <LI>A second list item <LI>A third list item that goes on and on and on to indicate that the lists can wrap right around the page and still be nicely formatted by the browsers. <LI>The final item. </UL> <p> Lists are exciting. You can also have ordered lists (the items are numbered) Both the start and stop tags are mandatoryunlike the closing tag for paragraphs the </UL> that ends an unordered list cannot be omitted. Other list elements include the ordered list element OL and the description or glossary list element DL. These elements are discussed in Chapter 6: The DL element is illustrated in Figures 6.25 and 6.26, while OL is illustrated in Figures 6.27 and 6.28. Like paragraphs, lists cannot be empty. However, unlike paragraphs, UL or OL lists can contain only one thingLI list elements. In turn, LI elements cannot be empty, as every list item must consist of some text; however, if you want a blank item, just put in a space character or a BR element. The ending </LI> tag is not required, as the end of a list item is implied by the next <LI> or by the </UL> tag that finally terminates the list, as illustrated in this example. An unordered lists is simply thatan unordered lists of items, each item marked by an indentation of some type and a star or bullet. It is up to the browser to format list items nicely and, as you can see in Figures 1.2 and 1.3, lynx and Netscape Navigator do very similar things. However, you will also note that these browsers do different things to the spacing that surrounds the lists; such browser-to-browser variations are common. As mentioned, the only thing that can go directly inside a UL element is an LI element. Thus, the following markup <UL> here is some non-list text inside a list <LI>Here is list item 1. </UL> is invalid. An LI element, however, can contain lots of things. For example, an LI element can contain text, the IMG element (for inline images), text emphasis (such as the STRONG element), another list, paragraphs, and even a fill-in HTML form. It cannot contain a heading element. Heading elements can only be directly inside the BODY, or inside a FORM (for fill-in forms) or a BLOCKQUOTE (for quoted text) element. FORMs and BLOCKQUOTEs are discussed in Examples 6 and 7 in Chapter 2.)
Lists Within Lists You can include lists within lists. For example, the markup <OL> <LI>ordered list Item 1 <LI>ordered list Item 2 <UL> <LI>unordered item under ordered list item 2 <LI>unordered item under ordered list item 2 </UL> <LI>ordered list Item 3 </OL> indicates an ordered list that in turn contains an unordered list under the second ordered list item. Horizontal RulesThe final element in Figure 1.1 is the HR or horizontal rule element. This element simply draws a horizontal dividing line across the page, and it is useful for dividing sections. This is also an empty element, since it does not act on a body of text. Lessons from Example 1
Example 1 ExercisesIt is time to start creating HTML documents! Using your favorite text or HTML editor (it doesnt matter which one), start creating Web pagesyou can use the examples in this book as a starting point, if you wish. All the example documents in this book can be found at either of the URLs: Once youve created a page, save it on your computer as a disk file. Make sure that you save it with the filename extension .html or .htm. Remember that a Web browser uses the filename extension to determine the type of the file, and these two extensions imply an HTML document. Once the file is saved to disk, you should start up a Web browser and view the document. All browsers provide an Open File... mechanism for loading in and viewing files from the local disk. If you have more than one browser, try viewing the document with these different programsthis helps you appreciate (and adjust for!) the different capabilities of the different browsers. Once the file is created and can be displayed by the browser, it is time to start editing the document, adding headings, lists, and other elements. In this process, concentrate on following the rules of HTML. Chapter 6 gives these rules in detail, so you can check there if you are not sure about the placement of a given element. Example 2: Simple Images and Hypertext LinksExample 1 illustrated how HTML can be used to mark up the logical organization of a single document. This second example illustrates the hypertext capabilities of HTML. The example consists of two documents, ex2a.html, and ex2b.html, with a hypertext link from one to the other. The documents are shown in Figures 1.4 and 1.9, respectively. Ex2a.html also includes inline images, here used to illustrate some of the issues involved when using images in your documents. Notice how space characters are used to indent and align the tags, in order to make the raw HTML easier to read. The Example DocumentWe will first examine Figure 1.4, namely the contents of the file ex2a.html. The first paragraph contains only text. The second paragraph is similar, except that it contains three images, included via the IMG element <IMG SRC=home.gif>. Home.gif is a GIF format image file; I know this by the .gif filename extension (and, of course, because I created it). GIF files are one of the common image formats that can be included within HTML documents.
|
Products | Contact Us | About Us | Privacy | Ad Info | Home
Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc. All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Read EarthWeb's privacy statement. |