1. Study the section on html lists in the w3schools tutorial. Much of what we see on the web is in list form.

explanation video

2. Unordered Lists: An unordered list is a list of items.

The list items are marked with bullets (typically small black circles).

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

<ul>
      <li>Coffee</li>
      <li>Milk</li>
</ul>

Here is how it looks in a browser:
• Coffee
• Milk

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

3. Ordered Lists:

An ordered list is also a list of items. The list items are marked with numbers.

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

<ol>
      <li>Coffee</li>
      <li>Milk</li>
</ol>

Here is how it looks in a browser:

  1. Coffee
  2. Milk

You can also use other alphabets, such as hebrew, greek, etc. See here.

Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

4. Nested lists:

You can use lists to make a sort of outline. Whenever you put lists inside of list items, that is called "nesting."

Here's an example: 

        <h5>Beaches near Wellfleet, MA</h5>
        <ul>
          <li>National Seashore
            <ul>
                 <li>Coast Guard</li>
                 <li>Marconi</li>
            </ul>
          </li>
          <li>Town
            <ul>
                <li>Newcomb Hollow</li>
                <li>White Crest</li>
                <li>Cahoon Hollow</li>
            </ul>
          </li>
        </ul>

Here is how it looks in a browser:

Beaches near Wellfleet, MA

5. Description Lists:

A description list is not a list of items. This is a list of terms and explanation of the terms.

A description list starts with the <dl> tag. Each description-list term starts with the <dt> tag. Each description-list definition starts with the <dd> tag.

<dl>
      <dt>Coffee</dt>
            <dd>Black hot drink</dd>
      <dt>Milk</dt>
            <dd>White cold drink</dd>
</dl>

Here is how it looks in a browser:

Coffee
Black hot drink
Milk
White cold drink

Inside a description-list definition (the <dd> tag) you can put images, large paragraphs, links, other lists, etc.

Due Date: Monday, 5/13/23:

Create an html document with a large table to layout the page. Style it to look good. In various cells of the table create the lists indicated:

  1. Two ordered lists, each using a different numbering system
  2. Two unordered lists, each using a different type of bullet
  3. A nested list
  4. Another nested list, with a 3rd level (a list inside one of the nested list's items)
  5. One Description list

Rubric

Category minus 15 points minus 10 points minus 5 points Full points
General Project Requirements       A layout table was used.
Lists Four of the seven lists mentioned above were done. Five of the seven lists mentioned above were done. Six of the seven lists mentioned above were done. All seven lists mentioned above were done.
Code Quality Code doesn't run as expected and shows they did not study or understand the learning resources Code displays somewhat as expected, minimal understanding of learning resources Uses somewhat appropriate syntax and correct features. Well formatted, basic understanding of learning resources Easy to understand. Uses appropriate syntax and features to accomplish the task. Shows they studied and understood the learning resources very well
Creativity Student does not show basic creative effort (i.e. no addition of content, text/headers/etc) Student shows minimal creativity from base requirement (i.e adds a couple things but not much) Student shows some creativity from base requirement (i.e creates some content, text/headings/etc and some nice styling) Student goes above and beyond base requirement and shows understanding of project (i.e. additional content, lots of styling, etc.)