1. Web Authoring
Topic 8 –
Listings in HTML

2. Objectives
Students should able to:
1 Use Web Authoring tool to create
various types of listing tags:
• Un-numbered list;
• Number list
2 Use Web Authoring tool to create
• definition lists <dl>:
• definition term <dt> ;
• definition description <dd> tags.

3. Objectives
Students should able to:
3 Use Web Authoring tool to insert special
characters.
4 Use Web Authoring tool to insert
horizontal lines.

4. HTML List
The most common HTML lists are
ordered and unordered lists:
An ordered list: An unordered list:
1.The first list item • List item
2.The second list • List item
item • List item
3.The third list item

5. Un-ordered list
An unordered list starts with the <ul> tag.
Each list item starts with the <li> tag.
Example:
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

6. Un-ordered list
For unordered list, type attributes
determine bullet style.
For unordered list, TYPE of LI can take
following values:
“disc” <LI TYPE = “disc”>
“circle” <LI TYPE = “circle”>
“square” <LI TYPE = “square”>

7. Ordered List
An ordered list starts with the <ol> tag.
Each list item starts with the <li> tag.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

8. Ordered List
For ordered list, the TYPE attribute of LI
determines the numbering type:
1 Arabic numbers 1, 2, 3, ... <LI TYPE = “1”>
a lower alpha a, b, c, ... <LI TYPE = “a”>
A upper alpha A, B, C, ... <LI TYPE = “A”>
i lower roman i, ii, iii, ... <LI TYPE = “i”>
I upper roman I, II, III, ... <LI TYPE = “I”>

9. Definition List
A definition list is a list of items, with a
description of each item.
The <dl> tag defines a definition list.
The <dl> tag is used in conjunction with <dt>
(defines the item in the list) and <dd>
(describes the item in the list):

10. Definition List
Example:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold
drink</dd>
</dl>

11. Special Characters
Symbols
& &amp; ampersand
¢ &cent; cent
© &copy; copyright
÷ &divide; divide
> &gt; greater than
< &lt; less than
&nbsp; Non breaking
space

12. Special Characters
Making a horizontal rule, or line , is easier
than most people think.
It's one small, short, and simple command;
<hr>
<hr width="75%"> Creates a horizontal
line of 75% window
width