Lesson 5 - Lists in HTML and a table example
In the previous lesson, Tables in HTML, we learned how to use tables. Today, we're going to add a table to our website and introduce lists. After today's lesson, you will finally have the required information to be able to use CSS and create custom website designs.
The skills subpage
Create another subpage on your website, this time, save it as skills.html. Add all of the necessary tags (doctype, html, head, body) and add a table to the body. The table will have 2 rows The first row, will have an icon of a programming language we know. Whereas, the second one will include a description of what we are able to do with it. I've downloaded the icons used in this lesson from http://www.iconfinder.com. Our subpage should now look something like this:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Skills</title> </head> <body> <h1>Skills</h1> <table> <tr> <td> <img src="images/html.png" alt="HTML" /> </td> <td> <img src="images/java.png" alt="Java" /> </td> <td> <img src="images/pascal.png" alt="Pascal" /> </td> </tr> <tr> <td> <h2>HTML</h2> <p>I started out with HTML. I can create simple websites, just like this one.</p> </td> <td> <h2>Java</h2> <p>I'm currenlty learning Java using ICT.social's courses. I can create simple console and form applications using object-oriented programming.</p> </td> <td> <h2>Pascal</h2> <p>I was taught Pascal in school, but I prefer the modern languages taught at ICT.social.</p> </td> </tr> </table> <p><a href="index.html">Back to the home page</a></p> </body> </html>
Browser preview:
We'll also need to include a link to the subpage in index.html. Done! Now let's head on over to Lists.
Lists
We use lists whenever we need to list items that are related somehow. A List can be used for cited works, numbered tutorial steps, navigation menus, and many, many other things. I'm sure you are familiar with bullet points from MS Word and other similar programs. There are 3 types of lists in HTML.
Unordered list
The first type is <ul>, which stands for Unordered List.
Items in it are unindexed and are displayed as bullet points as
default. Although the list is seen as unordered, the order of items is kept when
displayed in a browser. <ul> is a paired tag that wraps list
items.
List items
The <li> tag, stands for List Item, takes a single item in
the list, and wraps its text. Aside from text, it also takes images or any other
type of element.
Let's take a look at an example of an unordered list:
<h2>What I have learned today</h2> <ul> <li>How to create tables</li> <li>How to merge cells</li> <li>What does semantics mean</li> <li>How to create an unordered list</li> </ul>
The output:
Lots of people use the <ul> element to set up navigation
menus. We'll go over how to do all of that further along in the course.
Ordered list
Unlike unordered lists, items in ordered lists are
ordered using a key. All the key is, is a priority or sequence
of events. Its syntax is exactly the same as that of unordered lists. We use the
<ol> tag to wrap <li> list items. For
ordered lists, browsers display numbers by default:
<h2>My priority menu</h2> <ol> <li>Spaghetti</li> <li>Creamy sauce</li> <li>Hamburger</li> <li>Cheese burger</li> <li>Broccoli</li> </ol>
Here's what it would look like:
Contrary to unordered lists, the <ol> element has several
attributes:
- reversed - If the attribute is specified, list items are numbered backwards, in descending order. You may set the value to "reversed", but it wouldn't make a difference if you do (you could just leave it blank).
- start - The value of this attribute sets the first number of the list (entered as a number).
- type - Specifies the type of numbering to be used. Values can be set to 1, A, a, I, i for Arabic numerals, Latin letters, and Roman numerals.
There is only one attribute that can be added to the <li>
element:
- value - In an **ordered list, this attribute sets the item number. The items after the one that holds this attribute are automatically numbered based on the set value.
Let's try an even more complex example:
<ol reversed="reversed" start="4" type="I"> <li>Item</li> <li>Item</li> <li>Item</li> </ol>
The result:
Definition list
The last list type is the definition list. Unlike the first two, it contains 2 types of items:
Definition Term
We add terms that are to be explained/defined into <dt>
tags (stands for Definition Term).
Definition
We add explanations into <dd> tags (stands for Definition
Definition).
Here's a little showcase of definition lists:
<h2>Article glossary</h2> <dl> <dt>Tutorial</dt> <dd>A guide to doing things, shown step by step in most cases</dd> <dt>ICT.social</dt> <dd>A social network and knowledge base for programmers</dd> <dt>List</dt> <dd>A set of items that are related somehow</dd> </dl>
And the result:
Know what the next lesson, Solved tasks for HTML and CSS lessons 4-5, is going to be about? That's right! We're
going to introduce you to CSS styling! Look forward to it because our website is
going to look really fancy soon 
In the following exercise, Solved tasks for HTML and CSS lessons 4-5, we're gonna practice our knowledge from previous lessons.
Did you have a problem with anything? Download the sample application below and compare it with your project, you will find the error easily.
Download
By downloading the following file, you agree to the license terms
Downloaded 78x (68.87 kB)
Application includes source codes in language HTML
David learned IT at the Unicorn University - a prestigious college providing education on IT and economics.