HTML

UNIT 7 LISTS

Back to the index| Previous | Next

Competences: Insert an ordered or unordered list in the web page.

Contents: The tags ol, ul and li

The tag ol (as ordered list)

Here an example of ordered list:

CodeOutput
First Comenius partner schools:
<ol>
<li>Germany</li>
<li>Italy</li>
<li>Malta</li>
<li>Poland</li>
<li>Romania</li>
<li>Spain</li>
</ol>
First Comenius partner schools:
  1. Germany
  2. Italy
  3. Malta
  4. Poland
  5. Romania
  6. Spain

Note: the tag ol is at the beginning and at the end of the list. The tag li is in each line!

The tag ul (as unordered list)

Here an example of unordered list:

CodeOutput
First Comenius partner schools:
<ul>
<li>Germany</li>
<li>Italy</li>
<li>Malta</li>
<li>Poland</li>
<li>Romania</li>
<li>Spain</li>
</ul>
First Comenius partner schools:
  • Germany
  • Italy
  • Malta
  • Poland
  • Romania
  • Spain

Note: the tag ul is at the beginning and at the end of the list. The tag li is in each line!

A list of links!

Every line can be an anchor. In this case the a tag is inside the li tag:

CodeOutput
Comenius Live partner schools:
<ul>
<li><a href="http://lyk-peir-irakl.ira.sch.gr/">Greece</a> </li>
<li><a href="http://www.liceotorelli.it/">Italy</a></li>
<li><a href="http://www.czart.pulawy.pl/">Poland</a></li>
</ul>
Comenius Live partner schools:

A style for the lists

Besides the usual style properties, as the font or the color, it's possible personalize the lists by the property list-style-type.

Here some values:

Property and values (css code)Type of list points
ul {list-style-type: disc}
  • the list point is a full disc
  • ul {list-style-type: circle}
  • the list point is an empty circle
  • ul {list-style-type: square}
  • the list point is a square
  • Exercise: Make an ordered or unordered list in your web page!

    1. Open your index.htm file or another file.htm (as page2.htm)
    2. Create an ordered or unordered list (the favorite books or country or hobbies..).
    3. Save the modified file in your local site.
    4. Upload the file in the remote site.
    5. Write a message in the forum "Lists" to inform that your page is done!

    Ludovica Battista

    Back to index| Previous | Next