Posts
you have learned several ways in which to lay out content on a Web page.
Ordered and unordered lists provide yet another tool you can use to organize related text into groups
of either bulleted or numbered items in a list. Lists are very useful because they provide information
in a structured format. Ordered lists use an alphabetical or numerical system to organize Web content,
and unordered lists use symbols, or bullets, to identify each item in the list. Figure 1-20 shows a Web
page—with an ordered and unordered list.
Use ordered, or numbered, lists to create step-by-step instructions, where the order of the
elements in the list is important. The following HTML code describes the ordered list
<html>
<head>
<title>Example of ordered list</title>
</head>
<body>
<h2>Program Load</h2>
<ol>
<li>Insert CD into Computer</li>
<li>Click the Start Icon</li>
<li>Load the Program</li>
<li>Play the Game<</li>
</ol>
</body>
</html>
As shown in this example, to denote an ordered list within the Web page HTML, place the list’s
items between start and end ordered list tags (<ol></ol>). Then, to add items to the list, place the text
for each item between start and end list item tags (<li></li>).
By default, the Web browser will display an Arabic numeral (1, 2, 3, 4…) before each item in
the list—with the first item numbered 1. If you wish to use letters or roman numerals instead, insert
a type attribute in the start ordered list tag as follows:
• <ol type=“1”> Displays items using Arabic numerals (default)
• <ol type=“a”> Displays items using lowercase letters
• <ol type=“A”> Displays items using uppercase letters
• <ol type=“i”> Displays items using lowercase roman numerals
• <ol type=“I”> Displays items using uppercase roman numerals
To begin an ordered list at a number other than “1” (or alphabetically with a letter other than “a”)
insert a start attribute with a value other than “1” in the <ol> tag. For example, an ordered list that
starts with the following <ol> tag would begin the list with the letter “e”, because “e” is the fifth
letter of the alphabet:
<ol type="a" start="5">
Similarly, if you assign a “1” to the type attribute in order to indicate the browser is to place an
Arabic numeral before each item in the list, the browser would start the list with the first list item
numbered 5.
Unordered lists let you create groups of text items where the order of the items in the list is not
important, such as in a shopping list. The following HTML code will create the unordered list shown
previously in Figure 1-20:
<html>
<head>
<title>Example of unordered list</title>
</head>
<body>
<h2>Shopping List</h2>
<ul>
<li>Bread</li>
<li>Milk</li>
<li>Butter</li>
<li>Tea<</li>
</ul>
</body>
</html>
To denote an unordered list within the Web page HTML, place the list’s items between start and
end unordered list tags (<ul></ul>). As is the case with an ordered list, you add items to an unordered
list by placing the text for each item between start and end list tags (<li></li>).
By default, the Web browser will display a solid black dot (●) as the bullet character before each
item in the unordered list. If you want the browser to use a different bullet character, use the type
attribute in the <ul> tag to select the bullet symbol as follows:
• <ul type=“disc”> Displays items using a solid black dot (default)
• <ul type=“square”> Displays items using a black outlined square
• <ul type=“circle”> Displays items using a black outlined dot (that is, an unfilled circle)
0 comments:
Post a Comment