to home page

BWRS
SEARCH

HOMETUTORIALSLINKSFORUMGLOSSARYNEWS
 
LISTS
 
RAM from Crucial.com

LISTS

Lists organize lines of text into structured events. This can be useful in making your pages more readable (see if you can spot the different ones used elsewhere on this site)

There are 3 main sorts

In addition you can combine or nestle several of these


Numbered (or ordered) lists

These appear like this

  1. I'm the first point
  2. I'm the second
  3. I'm the third

They rely on 2 tags. The first is the ordered list tag <ol> which defines the start and finish of the list. The second is the list item <li> which goes before each item in a list

therefore the above is coded by

<body>
<ol>
<li>I&#039;m the first point
<li>I&#039;m the second
<li>I&#039;m the third
</ol>
</body>

Ordered list attributes

    You can add attributes to define the sequence used in an ordered list

    Here are 2 attributes that you can use

    type
    By default browsers use a list of numbers with ordered list (1,2,3,4......). You can change that by adding the type attribute

    for example

    <ol type = "i">
    <li>first
    <li>second
    <li>third
    </ol>

    would appear as

    1. first
    2. second
    3. third


    Here are some of the attribute values

     
    ValueEffectExample
    iSmall Romaniv
    ILarge RomanIX
    alowercase lettersa
    AUppercase lettersB
    1Arabic nos.3



    start
    determines the start point in the sequence of numbers (or others used)

    e.g.
    <ol type ="A" start =6>
    <li>first
    <li>second
    <li>third
    </ol>
    Appears as
     
    1. first
    2. second
    3. third

    Both of these can be put in individual <li> tags as well!!

    back to top


    Bulleted List

    Oddly these are called unordered list. The defining tag is the unorder list <ul>

    this example

    <body>
    <ul>
    <li>I&#039;m the first point
    <li>I&#039;m the second
    <li>I&#039;m the third
    </ul>
    </body>

    would appear as

    • I'm the first point
    • I'm the second
    • I'm the third

    Unordered list attributes

    the type attribute is used again but here it defines the bullet shape. Its values are disc, circle or square

    e.g.

    <ul type ="square">
    <li>first
    <li>second
    <li>third
    </ul>

    appears as

    • first
    • second
    • third

    back to top

    Definitions and definition list

    Definitions are another way of displaying info in an ordered fashion.

    You can use 2 tags to make definitions. Firstly the defined term tag <dt> sets the phrase you are defining. Usually you would follow it with a definition defined by <dd>. To create a definition list surround by <dl> tags

    try this

    <body>
    <dl
    <dt>The little motel
    <dd>Cheap place for the road traveler. Good access from major trunk road. Special fishing permit rates. Authentic Swiss chalet style building in beautiful location pets welcome. Has only Thai food in district
    <dt>The Big hotel
    <dd>Good place to stay for cheap food and reasonable breaks. Not expensive and has great views over the lake. Can organize excursions for guests. Has special 3 nights for the price of one offers
    </body>

    would appear as this.

    The little motel
    Cheap place for the road traveler. Good access from major trunk road. Special fishing permit rates. Authentic Swiss chalet style building in beautiful location pets welcome. Has only Thai food in district
    The Big hotel
    Good place to stay for cheap food and reasonable breaks. Not expensive and has great views over the lake. Can organize excursions for guests. Has special 3 nights for the price of one offersback to top
     

    Nestling lists

    you can nestle list within each other for more effect

    for example

    <ul>
    <li>my list
    <ol>
    <li>Is short
    <li>Is an example
    <li>Is for fun
    </ol>
    <li>Is now over
    <ul>
    Would appear as
    • my list
      1. Is short
      2. Is an example
      3. Is for fun
    • Is now over

    back to top

    Back to intermediatemenu
    BACK TO INTERMEDIATE HTML MENU