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

Lists can use various bullet shapes and sizes, and other formats such as letters and numbers

Bulleted items stand-out and therefore are easier to read.

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’>

Refer to INT222 course notes for examples of unordered lists…

The type attribute can be used in the <li> tag as well…

Unordered Lists Nested Lists

Lists can be placed within lists to indicate sub-items. 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’>

start – indicates which number or letter to start. Refer to INT222 course notes

for examples of ordered lists…

First two examples will produce lists with upper and lowercase letters. The last two examples will display lower and uppercase Roman numerals

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.

Web Broswer

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>).

Word or term

Definition ofWord or term

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