Learning to write a web page

Lists are a very nice way of showing a summing up of something. There are three different types of lists:

unordered lists

Lists in which all items are of equal importance, and you just put them in the order in which they come to you. For example:

• red squares
• purple triangles
• yellow circles

The list itself is announced and closed with <ul> tags, and the list items are put in <li> tags. Remember to close them!

The items in the list have a larger margin than the text around the list.

Different types of 'bullets' can be used by adding attribute type in the <ul> tag (values round or square, maybe more):

• round, the default

• square

ordered lists

Lists in which the order of the items is very important, for instance when you make a list of answers to a set of homework questions, or when you write down a recipe for a birthday cake. For example:

1. Wash 3 lemons and remove the zest (with a potato peeler, a small knife or a citrus zester)
2. Put the zest into a large heatproof pan
3. Add 3 oz caster sugar and 2 tbsp honey
4. Pour in 1.5 pints of boiling water
5. Stir, and leave to cool for three hours
6. Squeeze in the juice from the lemons
7. Serve this lemonade well-chilled

The list itself is announced and closed with <ol> tags, and the list items are put in <li> tags. The default numbering of the ordered list is with numbers (1 to whatever), but you can choose to have an alphabetical numbering by adding the attribute type="a" (or type="A" if you prefer capital letters), or roman numerals with type="i" (or type="I" for capitals), inside the <ol> tag.

The items in the list have a larger margin than the text around the list.

definition lists

Lists with terms and descriptions. This list-of-lists itself is a <dl> list: the types of lists are the <dt> tags (the definition terms), and then follows a description of the list-types in <dd> tags (the definition description). You can have more than one definition description, which will each start on a new line. Have a look at the source of this page to see how it is done.

The definition terms <dt> do not have any extra margin compared to the text around the list; the definition descriptions <dd> have quite a large margin.

Back to contents

What do we need? HTML and the .html file Tags Formatting Head and body
Size and shape Colour Colour table Colour wheels Pictures
Special characters Special characters table Hyperlinks Combining and nesting tags Lists
Tables Frames Style sheets Maps Forms Scripts Publicising (meta tags) Bits and pieces