Transcript Agenda

Agenda

Lists


Purpose
Types of Lists:



Unordered
Ordered
Definition
Lists
Lists allow you to display information in a
concise, organized manner without having
to use tables.
Things to do:



Put out the garbage
Walk the dog
Cook supper
Bulleted items standout and therefore are
easier to read.
Lists can use various
bullet shapes and
sizes, and other
formats such as
letters and numbers
Unordered Lists
<ul> Unordered List (block-level tag)





This will create a list that uses a bullet beside text
as opposed to numbers or letters. Use this style of
list when order is not important.
The <li> tag is used to designate (assign) the
individual items in the list.
The <ul> and <li> tags require closing tags
( i.e. </ul>, </li> )
Text will wrap on the next line if it’s too long to fit
on one line (i.e. word-wrap)
You can use attributes to change the bullet style.
Unordered Lists
Attributes
type – indicates which type of bullet style to be
used in the unordered list.
eg.
<ul type=‘circle’>
<ul type=‘square’>
<ul type=‘disc’>
The type attribute can
be used in the <li>
tag as well…
Refer to INT222 course notes for
examples of unordered lists…
Unordered Lists
Nested Lists



Lists can be placed within lists to indicate subitems. Source code and result is displayed below:
Item1
 Sub-Item 1a
 Sub-Item 1b
Item2
<ul type=‘square’>
<li>Item1
<ul>
<li>Sub-Item 1a</li>
<li>Sub-Item 1b</li>
</ul>
</li>
<li>Item 2</li>
</ul>
Ordered List
<ol> Ordered List ( block-level Tag)



This will create a list that order the lists by letter
or number. Use this style of list when order is
important.
Rules regarding the <ol> and <li> (beginning and
ending) tags remain similar as with unordered
lists.
You can use attributes to change the style of
number or letter that will appear in the list.
Ordered Lists
Attributes
type – indicates which type of style to be used in
the ordered list (default is decimal numbers).
eg.
<ol type=‘A’>
<ol type=‘a’>
<ol type=‘I’>
<ol type=‘i’>
First two examples will produce lists with
upper and lowercase letters. The last
two examples will display lower and
uppercase Roman numerals
start – indicates which number or letter to start.
Refer to INT222 course notes for
examples of ordered lists…
Definition Lists
<dl> definition list (block-level tag)

The definition list allows the user to define words (like a
glossary of terms). Refer to example below.
Word or term
Web Broswer
Definition of
Word or term
A software application used to locate and display web pages

The <dl> and </dl> tags define the area of a definition
list. There are two other tags that are used:


<dt> (definition term) – this represents the “word” or
“term” being defined (requires ending tag </dt>)
<dd> (definition description) – this represents the
“definition” of the above-mentioned work or “term”
(requires ending tag </dd>).
Definition Lists
Lists can be placed within lists to indicate sub-items.
Source code and result is displayed below:
Web Browser
A software application used to locate and display web pages
<dl>
<dt>Web Browser</dt>
<dd>A software application used to
locate and display web pages</dd>
</dl>
Note: By default, a
browser will align terms
on left (indented for
each item).
Refer to INT222 web
page for additional
examples