Free HTML Tutorials   •   CSS   •   Frames Tutorials   •   Forms Tutorials   •   Beginners HTML Tutorials   • Advanced HTML Tutorials   • JavaScripts   • Free Web Page Tutorials   •   Free Downloads
OzWebLogo Beginners Section

LISTS OF THINGS


We will look at two different list styles and nested lists. Here they are - in a list of course:

  • Ordered or Numbered Lists
  • Unordered or Bulleted Lists
  • Nested Lists

ORDERED or NUMBERED LISTS

A numbered list of items could be a top forty list, favourite foods or any kind of list that need a ranking order. You don't need to put the numbers in - they will be automatically generated by using the correct code for your list.

Ordered Lists use two types of tags:

  • The entire list is surrounded by the <OL> and </OL> (ordered list) tags.
  • Each item in the list is preceded by the <LI> (list item) tag. Close each with the </LI> tag.

There are a few different options for numbered lists. If you start the list with <OL CONTINUE> that tells the browser to start this list's numbers where a previous list left off. You can also use a <LH> (list header) tag to specify a title for the list.

Here is the code:

    <B>THE PLANETS </B>
    <OL>
    <LI>Mercury</LI>
    <LI>Venus</LI>
    <LI>Earth</LI>
    <LI>Mars</LI>
    <LI>Saturn</LI>
    <LI>Jupiter</LI>
    <LI>Uranus</LI>
    <LI>Neptune</LI>
    <LI>Pluto</LI>
    </OL>

And here is how the browser interprets it:

THE PLANETS

  1. Mercury
  2. Venus
  3. Earth
  4. Mars
  5. Saturn
  6. Jupiter
  7. Uranus
  8. Neptune
  9. Pluto

As you can see, the numbers were automatically generated by the code.

Your list items don't have to be just plain text, you can insert other HTML tags. For example, you could use <B> and </B>, you could use a tag to increase the font size of the item, or you could make an item a link to another page.

BULLETED OR UNORDERED LISTS

Bulleted or unordered lists place a dot or square, depending on the browser, at the beginning of each item in a list. As with the numbered or ordered list, start each item with the <LI> tag, but enclose the whole list with the <UL> and </UL> tags.

And here is what a list will look like with bullets instead of numbers:

MY SIX FAVOURITE FLOWERS

  • Roses
  • Day Lilies
  • Daisies
  • Jasmine
  • Geraniums
  • Ranunculi

COMBINING OR NESTING LISTS

You can also combine or nest lists one inside the other. For example, you can insert a bulleted list after or within a numbered list item. Or a couple of bulleted lists inside a list. I'll use an index type example of a nested list.

Here is the code for the first part:

    <B><A HREF="getstart.html"> Getting Started </A></B>
    <UL>
    <LI>What you need
    <LI>Getting started
    <LI>Creating your first web page
    </UL>

Now I will expand this using nested lists, like this:

    <B><A HREF="getstart.html"> Getting Started </A> </B>
    <UL>
    <LI>What you need
    <OL>
    <LI>Windows 95/98/2000/XP
    <LI>A text editor
    <LI>A browser </OL>
    <LI>Getting started
    <UL><LI>Creating your first web page</UL>
    </UL>

This is how it looks - note that the underlined word is an actual link. You need not bother clicking it unless you want to read Getting Started again!

   Getting Started

  • What you need
    1. Windows 95/98/2000/XP
    2. A text editor
    3. A browser
  • Getting started
    • Creating your first web page

Try combining ordered and unordered lists or use them for headings and sub-headings or even sub-sub-headings. You may have to experiment a bit, but just be careful to close off each section with the right tags.

FONTS AND COLOURS

As mentioned previously, you are not limited to plain black for font colours or to the default font face. Just like any other piece of code you can specify the font and colour. The bit below uses the Comic Sans font face with blue and red specified as the colours.

MY SIX FAVOURITE PASTIMES

  • Eating
  • Sleeping in
  • Fishing
  • Parasailing
  • Web surfing
  • Bungy jumping

AN EXTRA TIP OR TWO

    If you want to put a margin or some space on the left side of your page, or indent a section of the page, here is a very easy way to do it. Using the unordered list tag, <UL>, place it just before the part you want to indent. Close it with </UL>. Do not use the <LI> tags. As an example, this section has been indented using it.

    For a full web page, straight after <BODY> and before you put in your content, type in <UL>. At the very end, before </BODY>, close the tag with </UL>. It's a bit hard to show you a full page example here, so try it out for yourself.

    If you need to use a list within the document, make sure you use the opening and closing tags correctly or you will end up in a mess.

Next:  Special Characters

Beginners Index

Help
Copyright ©1998-2008 OzWebWeaver.