Dream.In.Code > Guide to the Web and Design part VII

capty99

3 Oct, 2006 - 09:09 PM

HTML Basics – Lists

Lists are just a way to display information and html has some built in mechanisms to work with them. You have unordered and ordered lists. The first just using bullets and the latter using numbers.

The tags are <ul> for an unordered list and <ol> for an ordered list. With the container <li> to show information that will go after each bullet or number. Example :

CODE

    <ol>
        <li> information </li>
        <li> information </li>
            <ul>
                <li>more info </li>
                <li>more info </li>
            </ul>
        <li> information </li>
    </ol>

Notice I nested some lists in there just to see how you could possibly use them.

Now , if you have read through all the Guides to the Web that I have posted, go ahead and combine all of this information together and you can build yourself a couple pages that link between each other and display both graphics and text. Think of an idea , just something simple that would require a few pages to build a website for. Make up a company and have an about page, news page etc.... and just type out some html. The best way to learn this stuff is by playing with it and getting everything down pat.

Arbitrator

4 Mar, 2007 - 04:42 PM

Actually, that list is invalid. The inner lists should be inside a list item (li) element:

CODE

<ol>
  <li>information</li>
  <li>information
    <ul>
      <li>more info</li>
      <li>more info</li>
    </ul>
  </li>
  <li>information</li>
</ol>

Just to add to the information:

Ordered lists (ol) list content that is inherently ordered (changing the order would change or harm the meaning). Such cases include basic a table of contents (yes, I know not using a table for a table of contents may sound strange) or a simple list of instructions, like how to make a peanut butter and jelly sandwich.
Unordered lists (ul), like this one, list content where the order doesn’t matter such as a list of your favorite things or all of your cats’ names.
Definition lists (dl) list a term and one or more associated definitions. They’re good for defining terms (like a dictionary) or associating groups under an umbrella term. Here’s an example:
- CODE
  <dl>
    <dt>“bright” synonyms</dt>
    <dd>shining</dd>
    <dd>sparkling</dd>
    <dd>gleaming</dd>
    <dt>“bright” antonyms</dt>
    <dd>cloudy</dd>
    <dd>murky</dd>
    <dd>dusty</dd>
  </dl>

hiphop_13

1 Aug, 2007 - 10:49 AM

Hello, its nice from you to share this information, i was starting to forget about html bcause i ddnt use since i took it in university as a course
well im waiting for the next tutorial to see CSS and i will wait your javascript posts..
Thanks for these tutorials they really help.