CBTE 162: Web Page Creation : Exercises

Exercise 2: Using Lists

In this Exercise we will work with three different types of lists: Unordered, Ordered and Definition Lists and then review some Exercise One Elements. Follow the Exercise TWO Assignment Instructions on BlackBoard. Review DEMO & VIDEO pages as needed.


Prep Work

Name your folderon your desktop: YourLastNameEx2
Name your First HTML Page: index.html

Number of Pages Required: Two

The Unordered List - UL

Use this element to create a list with bulleted items in it. The list items will go inside the opening and closing UL tag. So open the ul tag, put in your list items, then use the closing ul tag.

<ul> </ul>

Use the TYPE attribute to change the bullet styles by using the different values. The default style is the round black bullet.

  • type="square", "circle", or "disc"

The List Items

Use the LI Element to create your List Items in your unordered list. Add as many LI to each list as you want.

<li> </li>

EXAMPLE:
<ul type="circle">
<li> Taco </li>
<li> Pizza </li>
<li> Lasagna </li>
</ul>


The Ordered List - OL

Use this element to create a list with numbered or alphabetized items in it. The list items will go inside the opening and closing UL tag.

<ol> </ol>

Use the TYPE attribute to change the styles by using the different values. The default value is number, but you also have options for Roman Numerals, capital letters or lowercase letters.
The second attribute you can use is start. The value would be a number. Try with and without the attributes.

  • type="1", "I", "A", or "a"
  • start="#"

The List Items

The Ordered List - OL also uses the LI Element to create the List Items. Add as many LI to each list as you want.

<li> </li>

EXAMPLE:
<ol type="A">
<li> Dog </li>
<li> Cat </li>
<li> Fish </li>
</ul>

You can also nest lists inside of lists. Make sure you close as many as you open

The Definition List - DL

Use this Element when you have terms to define. The Definition List DOES NOT use List Items. It uses Definition Terms DT and Definition Descriptions DD.

<dl> </dl>

The Definition Terms & Definition Descriptions

<dt> </dt> & <dd> </dd>

EXAMPLE:
<dl>
<dt> Tiger </dt>
<dd> A large striped cat that lives in the wild </dd>
<dt> Elephant </dt>
<dd> A large grey animal with big ears </dd>
</dl>


Exercise Two Grading Rubric
Item/Points 1 2 3
Coding Some Most All correct
Function Some Most All
Requirements Some Most All
Effort Minimal Basic Requirements Above & Beyond
Deadline More than one class late 1 Class Late On Time

Evaluation

This exercise is worth 15 points.

Coding (3)
Functionality (3)
Meeting project requirements (3)
Your effort (3)
Meeting deadlines (3)


Useful Links

List of Supported HTML Color Names with hex codes included