HTML and CSS Reference
In-Depth Information
To Create an Unordered List
To highlight what Web site visitors will need for equipment when taking a class with Rock Climbing Fun you
will create a bulleted (unordered) list using the HTML tags and text shown in Table 2- 5. Remember that each list
item must start with <li> and end with </li>.
Table 2- 5 Adding an Unordered List
Line
HTML Tag and Text
17
<ul>
18
<li>Comfortable climbing shoes</li>
19
<li>Backpack</li>
20
<li>Harness</li>
21
</ul>
22
</article>
23
</section>
The following step illustrates how to create an unordered, or bulleted, list using the default bullet style.
1
•
With the insertion
point on line 17, enter
the HTML code, as
shown in Table 2- 5.
When you type the
text on
line 18,
make sure
to press
the
t a b
key at the start
of the line (also on
lines 19 and 20 if they
are not automatically
indented). Press
e n t e r
at the end of each line.
each list item
enclosed in
<li> </li> tags
bulleted list tags and
text enclosed in <ul>
and </ul> tags
Figure 2-14
•
On line 23, press the
e n t e r
key twice, positioning the cursor on line 25 and leaving a blank line on 24 (Figure 2-14).
Why do you press the
t a b
key at the start of the lines with the <li> (list item) code?
Using the
t a b
key (to indent) when you enter list items helps format the text so that you can easily see that this text
is different from the paragraph of text. Indenting text helps the Web developer see that certain segments of code are
related to each other.
More About List Formats
If you use the <ul> or <ol> start tags without attributes, you will get the default
bullet (disc) or number style (Arabic numerals). To change the bullet or number type, the
list-style-type
property is entered within the <ol> or <ul> tags. To create a list with
square bullets, you would type the line
<ul style=”list-style-type: square”>
as the inline style (CSS) code. You can find other list-style properties and values in
Appendix D.
