Now we are off to the wonderful world of lists. Lists can be a useful and informative addition to any website, providing that you place the lists in strategic places. Design-wise, I mean.
Unordered Lists
Unordered lists are the easier of the three types allowed in HTML. This type of list looks like the ones you are accustomed to. List items are preceeded by a bullet, a little black dot of moderate size.
The basic tag structure is the same (you know, the little < and > symbols). But for unordered lists (and ordered and definition), you have to use more than one tag to get the effect. It's a team effort, I guess. First off, there's the <ul> tag that declares to the browser, "I am unordered list, hear me ROAR!!" Actually, the tag tells the browser that the tags following it are part of an unordered list. The </ul> end tag tells the browser when to stop the unordered list.
The items you want to put into the unorded list are preceded by the <li> tag. This tag tells the browser that the content folllowing it is one item in the list and deserves a bullet to precede it on the webpage. At the end of the content for the item, you put the <li> endtag. That's it. You can have as many items in your list as you want. It's unlimited, and refills are free! When you've entered in all the stuff for the list, you put in the </ul> end tag to wrap up the list. After that, the content will go back to non-list format. If you're confused, there's an example below of what you would type in.
Since little black dots get somewhat boring after a while, you can change the shape of the bullet. There are squares, and open circles, and open squares, and... um.. that's about it. Well, that's still quite a selection, isn't it? The type attribute in the <ul> tag allows you to select which bullet type you would like. Now here's all the quick technical info:
circle
square
<li>This is a list item</li>
<li>And this is another</li>
</ul>
| Unordered Lists - Microsoft Internet Explorer |
|
If you had the list code in the rest of the HTML (I'm somewhat lazy) then you would get something like the example above. See the bullet? Ordered lists are basically just like unordered lists, but each list item is numbered/lettered. Ordered lists are the type that you see above in the chpater outlines. Instead of making a list and numbering it by hand, ordered lists make the browser do the work! Each item is numbered sequentially, i.e., 1,2,3,4.... or a,b,c,d.... There are many options on the type of numbering, such as Arabic numbers (the ones we normally use), Roman numerals, upper-case or lower-case, and Latin characters, upper- and lower-case. Another handy feature that ordered lists allow you to do is to start the numbering at a number other than 1! (or a letter other than "a")
Ordered Lists
Essentially ordered lists use the <ol> tag to mark off the start of the list, the <li> tags again to identify list items. There are some special properties to ordered lists. You can start the numbering at whatever you want. And the <li> tag has an attribute which allows you change the type of numbering in each individual item.
a
A
i
I
NOTE: this is one of the few times when anything is CASE-SENSITIVE. You can pick capital letters of Roman numerals.
a
A
i
I
NOTE: this is one of the few times when anything is CASE-SENSITIVE. You can pick capital letters of Roman numerals.
<li>Number five; thought you were going to get number 1, eh?</li>
<li type=a>little letter "f";see, it keeps the same order; "f" is letter no. 6 </li>
<li type=i>little numeral "vii"</li>
</ol>
| Ordered Lists - Microsoft Internet Explorer |
|
Nice example, eh? I think so. Before we leave ordered lists, I have to tell you about some defaults:
- ordered lists start at 1
- the list type is Arabic numerals, i.e., "1"
Definition lists are used when you want to define a bunch of terms. There are two visible elements: the definition term and the definition. The term obviously is what you want to define. The definition... well, that's self explanatory. When you employ a definition list in your webpage, the term is flush with the left margin, followed by an empty line, and then the definition, which is indented. You can take a look at the example.
The first of three code elements is the <dl> tag. This tag is analogous to the <ul> or <ol> tags; the <dl> tag tells the browser that there is going to be a definition list; similarly its end tag tells the browser that the list has ended.
The second tag is for the definition term. Quite appropriately the tag is <dt>. Whatever goes between this tag and its end tag is treated as a term and appropriately formatted (terms are flush with the left margin).
The final tag codes the definition for the term. Anything that goes between the tag <dd> and its respective endtag is formatted as a definition (the whole definition is indented).
You can place terms and definitions in whatever order you please; and you can put more than one term/definition unit in a definition list (<dl>). And finally, there are no attributes for any of these tags.
<dt>HTML</dt>
<dd>Hypertext Markup Language. Developed by physicist Timothy Berners-Lee in the early 1990s. A flexible computer language designed for the World Wide Web.</dd>
</dl>
| Definition Lists - Microsoft Internet Explorer |
|
Nesting Lists
No, this is not another type of list. What I am writing about is what happens when you nest lists.
But first, what is nesting? Nesting is the situation when you place a tag within a tag, like so:
I'm discussing nesting because you can nest lists, to accomplish an outline type effect, like the one used in the list of chapter contents above. As you can see, a list in the place of "tag2" will be indented a bit further than a list in the place of "tag1". In unordered and ordered lists, there is the increased indent .
In unordered lists, as you nest, the bullet will change shape. The shape is determined by whichever browser the reader is using.
Well, another chapter bites the dust. Alright, if you think you're ready for Chapter 3: Text Format Tags, then click on, young Skywalker. Oh wait, this isn't Star Wars...