Creating lists

Creating Lists
• Lists are a part of everyday life. To-do lists determine what to get
done. Navigational routes provide turn-by-turn lists of directions.
Recipes provide lists of ingredients and lists of instructions. With a list
for nearly everything, it’s easy to understand why they are also
popular online.
• When we want to use a list on a website, HTML provides three
different types to choose from: unordered, ordered, and description
lists. Choosing which type of list to use—or whether to use a list at
all—comes down to the content and the most semantically
appropriate option for displaying that content

Unordered Lists
• An unordered list is simply a list of related items whose order does
not matter. Creating an unordered list in HTML is accomplished using
the unordered list block-level element, <ul>. Each item within an
unordered list is individually marked up using the list item element,
<li>.

example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Ordered HTML Lists
An ordered list starts with the <ol> tag. Each list item starts with the
<li> tag.
The list items will be marked with numbers.
<h2>Unordered List with Default Bullets</h2>
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

Ordered HTML Lists
The Type Attribute
A type attribute can be added to an ordered list, to define the type of the marker:
Type Description
type="1" The list items will be numbered with
numbers (default)
type="A" The list items will be numbered with
uppercase letters
type="a" The list items will be numbered with
lowercase letters
type="I" The list items will be numbered with
uppercase roman numbers
type="i" The list items will be numbered with
lowercase roman numbers

Ordered HTML Lists (Numbers)
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Upper Case:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Lower Case:
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Roman Upper Case:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Roman Lower Case:
• <h2>Unordered List with Default Bullets</h2>
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

HTML Description Lists
• A description list, is a list of terms, with a description of each term.
• The <dl> tag defines a description list.
• The <dt> tag defines the term (name), and the <dd> tag defines the
data (description).

Description Lists
Description List:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

Nested HTML Lists
List can be nested (lists inside lists).
<ol>
<li>Walk the dog</li>
<li>Fold laundry</li>
<li>
Go to the grocery and buy:
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Cheese</li>
</ul>
</li>
<li>Mow the lawn</li>
<li>Make dinner</li>
</ol>

Horizontal Lists
HTML lists can be styled in many different ways with CSS.
One popular way, is to style a list to display horizontally:

• <h2>Horizontal List</h2>
• <ul id="menu">
• <li>Apples</li>
• <li>Bananas</li>
• <li>Lemons</li>
• <li>Oranges</li>
• </ul>

Chapter Summary
1. Use the HTML <ul> element to define an unordered list
2. Use the HTML style attribute to define the bullet style
3. Use the HTML <ol> element to define an ordered list
4. Use the HTML type attribute to define the numbering type
5. Use the HTML <li> element to define a list item
6. Use the HTML <dl> element to define a description list
7. Use the HTML <dt> element to define the description term
8. Use the HTML <dd> element to define the description data
9. Lists can be nested inside lists
10. List items can contain other HTML elements
11. Use the CSS property display:inline to display a list horizontally

html - font
• The <font> tag provides no real functionality by itself, but with the
help of a few attributes, this tag is used to change the style, size, and
color of HTML text elements. The size, color, and face attributes can
be used all at once or individually, providing users with the ability to
create dynamic font styles for any HTML element.

html - font size
Set the size of your font with size. The range of accepted values goes
from 1 -- the smallest, to 7 -- the largest. The default size of a font is 3.
• HTML Font Size Code:
<p>
<font size="5">Here is a size 5 font</font>
</p>

html - font color
HTML Font Color Code:
<font color="#990000">This text is hex color #990000</font>
<br />
<font color="red">This text is red</font>

html - font face
Choose a different font face by specifying any font you have installed. Font face is
synonymous with font type. As a web designer, be aware that if you specify a
custom font type and users viewing the page don't have the exact same font
installed, they will not be able to see it. Instead the chosen font will default to
Times New Roman. To reduce the risk of running into this situation, you may
provide a list of several fonts with the face attribute, such as outlined below.
HTML Font Face Code:
<p>
<font face="Georgia, Arial, Garamond">This paragraph
has had its font...</font>
</p>

beautiful first letter style
Customize your fonts to achieve any desired look.
HTML Code:
<p><font size="7" face="Georgia, Arial" color="maroon">W</font>elcome To
South Africa The Rainbow Nation.</p>

Creating lists

More Related Content

What's hot (7)

Similar to Creating lists (20)

More from nobel mujuji (15)

Recently uploaded (20)

Creating lists