Home Lessons LAMP HTML/CSS PHP MySQL JavaScript YouTube Blog PHP Fiddle

Intro to HTML: Lists




Quick Copy Boxes

List elements are used to group items together.

At the bottom of this page there is a code editor pre-loaded with the lesson's code.

Unordered Lists

Unordered Lists, are lists that are not numbered. They usually use bullet points. You can select what you want yo use as a bullet point or even use your own.

Example unorder list:

    Favorite Games:

  • Wolfenstein
  • Ikariam
  • Yoshi's Island

Example Unordered List


<body>
  <!-- Unordered List Element-->
 <ul style="list-style-type:circle" class = 'exList'>
  <!-- List's Heading-->
   <strong>Favorite Games:</strong>
   <br><br>
  <!-- Items in the list-->
   <li>Wolfenstein</li>
   <li>Ikariam</li>
   <li>Yoshi's Island</li>
 </ul>
</body>

➼ <body></body> - Body Element
➼ <ul></ul> - Unordered List Element
➼ <ul> - Unordered List Start Tag - the ➼ style attribute sets the shape of the bullet points. ➼ class attribute refers to a CSS class.
➼ <strong></strong> - Strong Tags - They make text bold. I used strong tags for my list's heading.
➼ <br> - Line Break - I inserted two.
➼ <li>s - The List's Items
➼ <li></li> - List Item - Each one gets a buliet point and is aligned.

Types of Bullet Points

✶ Disc (default)
 Code: <ul style='list-style-type:disc'>
 OR <ul>
✶ Circle
 Code: <ul style='list-style-type:circle'>
✶ Square
 Code: <ul style='list-style-type:square'>
✶ No Bullets
 Code: <ul style='list-style-type:none'>

Ordered Lists

Ordered Lists, specify an order to the the listed items. Instead of bullets, they use numbers, letters or roman numbers.

Example ordered list:

    Baking a Cake

  1. Ingredient
  2. Equiptment
  3. Directions

Example Ordered List

   
   <body>
     <!-- Ordered List Element-->
    <ol type="I" class = 'exList'>
     <!-- List's Heading-->
      <strong>Baking a Cake</strong>
      <br><br>
     <!-- Items in the list-->
      <li>Ingredient</li>
      <li>Equiptment</li>
      <li>Directions</li>
    </ol>
   </body>

➼ <body></body> - Body Element
➼ <ol></ol> - Ordered List Element
➼ <ol> - Ordered List Start Tag - the ➼ type attribute sets the type of numbers or letters. ➼ class attribute refers to a CSS class.
➼ <strong></strong> - Strong Tags - They make text bold. I used strong tags for my list's heading.
➼ <br> - Line Break - I inserted two.
➼ <li>s - The List's Items
➼ <li></li> - List Item - Ordered by Roman Numbers (I,II,III)

Ordering Types

✶ Numbers (default)
 Code: <ol type='1'>
 OR <ol>
✶ Letters: Uppercase
 Code: <ol type='A'>
✶ Letters: Lowercase
 Code: <ol type='a'>
✶ Roman Numbers: Uppercase
 Code: <ol type='I'>
✶ Roman Numbers: Lowercase
 Code: <ol type='i'>

Applied Assignment

Background: You are a web developer building an application. You are working on the same project as the Navagation Lesson's applied assignment. Today you are creating a page that lists items people should have ready, in case of an alien-bug attack.
Assignment: Create a Page that includes all the lists described.
Example Description: A list of weapons to use against the bugs."

Example Code:


<ol>
   <strong>Best Weapons</strong>
   <br><br>
   <li>Web Development</li>
   <li>Bug Spray</li>
   <li>TNT</li>
 </ol>

Descriptions:
1) A list of survival items, packed and ready to go.
2) A list of Coding Commanders' bases and safe houses.
3) A list of foods that are good for travel.