Lesson 5 - Lists in HTML and a table example

HTML and CSS First website 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:

HTML table of skills

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:

Unordered list ul – HTML tutorial

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:

Ordered list ol – HTML tutorial

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:

More complex ordered list ol – HTML tutorial

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:

Definition list dl – HTML 5 manual

Know what the next lesson, Introduction to CSS (Cascading Style Sheets), 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 :)


 

Download

Downloaded 59x (68.87 kB)
Application includes source codes in language HTML

 

 

Article has been written for you by David Capka
Avatar
Do you like this article?
1 votes
The author is a programmer, who likes web technologies and being the lead/chief article writer at ICT.social. He shares his knowledge with the community and is always looking to improve. He believes that anyone can do what they set their mind to.
Unicorn College The author learned IT at the Unicorn College - a prestigious college providing education on IT and economics.
Thumbnail
Previous article
Tables in HTML
Thumbnail
All articles in this section
Make your first website, step by step!
Activities (8)

 

 

Comments

Avatar
Ardouin Best Saint Jean:7. July 0:41

<html lang="en">
<meta charset="utf-8" />
<title>Essay</ti­tle>

<head>

</head>
<body>
<h1>Love </h1>
<p>The best thing that could ever be existed ever.</p>

<p><img src="images/je­an.png" alt="girlfriend" />
<h2></h2>

<table>
<thead>
<tr>
<td>preview</td>

</tr>
</tbody>

<tr>
<td><img src="images/Ja­va.png" alt="girlfriend" /></td>

</tr>

</tbody>

</table>

<h2>What kept me living after God (Richelene)</h2>
<ul>
<li>Her beautifull smile</li>
<li>That stubborn look</li>
<li>Her motivation</li>

</ul>

<p> ASJ<p>

</body>

</html>

 
Reply 7. July 0:41
To maintain the quality of discussion, we only allow registered members to comment. Sign in. If you're new, Sign up, it's free.

1 messages from 1 displayed.