Web Design 1 - HTML Lesson 7 - Creating Lists

There are TWO types of lists possible in HTML

unordered - these use some type of icon

  • item 1
  • item 2
  • item 3
  • item 4
  • An unordered list starts with a <ul> tag - then each line item is enclosed in <li> tags, before closing the list with </ul>

<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>

style attribute can be added to an unordered list, to define the style of the marker:

Style Description
list-style-type: disc The list items will be marked with bullets (default)
list-style-type: circle The list items will be marked with circles
list-style-type: square The list items will be marked with squares
list-style-type: none The list items will not be marked

In this case the opening tag would be changed to: <ul style="list-style-type: circle">

ordered - these have a numbering or lettering system

  1. item 1
  2. item 2
  3. item 3
  4. item 4

    An ordered list starts with a <ol> tag - then eachline item is enclosed in <li> tags, before closing the list with </ol>

    <ol>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    </ol>

    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

In this case the opening tage would be changed to: <ol type="A"> - if I wanted the list to have Capital Letters

Below are six different types of lists. Create each of them on your page. Use your own text ideas for the lists rather than just copying the examples, and have at least 3 items in each list

1. A SiMPLe UnOrdered List

Unordered - uses the browser default icon for lists - you don't need to specify a style for this - just let the browser use whatever is the default style


2. A Simple ordered List

Ordered - where a browser default numbering system is used - you don't need to specify a type for this - just let the browser set the style for you

3. An unOrdered List with a change of icon style

Create your 3rd list - make it an unordered list and use a style to change the list icon to a square


4. An Ordered List with a change of type

Create your 4th list - set the type to use upper case letters

5. An unordered list using an image icon

Create your 5th list and use the cat icon

copy this image of a cat and put it in your web images folder

* it is important to note that this image is actually a gif file - it has transparency in it - if you open it in Photoshop you will see that the gray & white squares are around the cat image - this allows the background color of the page to show through. That is why on the list screen shot there is not a white "box" around the cat icon.

Create an unordered list and modify the <ul> tag to call the image

<ul style="list-style-image: url(images/kitten_icon.gif)">

6. An unordered freestyle list

Create your 6th list - this time use a different image icon and try including some of the other style changes that you have learned

Here is another list that I made - this one also adds some more style changes such a font famly, font size, and text color. If you do an advanced google image search you will see an option for sizes that match icon. If you make your own just remember that in order for transparency to work on a web page the image must be saved as a .gif (else you will get a white boxy background)


 

Assignment for HTML Lesson 7

Six different types of lists

  1. An unordered list with the default icon
  2. An ordered list with default numbers
  3. An unordered list with a square bullet icon
  4. An ordered list with upper case roman letters
  5. An unordered list using the cat image as an icon
  6. Create your own list - use a different icon and challenge yourself to use the style tools you have learned
  7. Include links to lesson on index page, and a link back to your index
  8. Upload all files to x10 and check to be sure they work