| 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
These appear like this - I'm the first point
- I'm the second
- 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'm the first point <li>I'm the second <li>I'm the third </ol> </body> Ordered list attributesYou 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 - first
- second
- third
|
Here are some of the attribute values
-
Value | Effect | Example | i | Small Roman | iv | I | Large Roman | IX | a | lowercase letters | a | A | Uppercase letters | B | 1 | Arabic 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 -
- first
- second
- third
|
Both of these can be put in individual <li> tags as well!!
Oddly these are called unordered list. The defining tag is the unorder list <ul> this example <body> <ul> <li>I'm the first point <li>I'm the second <li>I'm the third </ul> </body> would appear as - I'm the first point
- I'm the second
- I'm the third
Unordered list attributesthe 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 |
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 offers
-
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
- Is short
- Is an example
- Is for fun
- Is now over
|
|