HTML Part 8: Ordered and unordered lists

RSS Newsfeed
for your site

DW News
Calendar
DW Forum

Right click on button and copy shortcut

Reminder

Remember to book mark this site!

HTML stands for HyperText Markup Language

Part 8: Lists in HTML

We are going to work on lists. we can create lists directly in HTML without assigning numbers.

1. Types of Lists: There are two kinds of lists, and they are fairly simple.

<ol> is an ordered list
<ul> is an unordered list
<li> is used for each list item

2. Unordered Lists: An unordered list has what is commonly called "bullets". We can add a bulleted list by adding an unordered list. The unordered list is contained within the Unordered list tags, <ul> </ul> tags. Each item in the list will be contained within the list item tags, <li> </li>

We will add an unordered list to our html code. Add the following code to your page body so far created and brought forward from lesson 7.

Reasons I like Html <ul> <li> I can make my pages as I want them</li> <li> Once I learn html, the other languages come easily</li> <li> Even if I use an html editor, I can now adjust aspects of the page</li> <li> I can look at other peoples html code to learn how to do neat things</li> </ul>

The unordered list will look like this:

Reasons I like Html

I can make my pages as I want them

Once I learn html, the other languages come easily

Even if I use an html editor, I can now adjust aspects of the page

I can look at other peoples html code to learn how to do neat things

3. Ordered Lists: An ordered list has what is commonly called "numbered list". We can add a numbered list by adding an ordered list. The ordered list is contained within the Ordered list tags, <ol> </ol> tags. Each item in the list will be contained within the list item tags, <li> </li>

We will add an ordered list to our html code. Add the following code to your page body so far created.

Things I have learned <ol> <li> Html base code</li> <li>How to align text</li> <li>Font attributes</li> <li>Inserting images</li> <li>Image attributes</li> <li> Creating links</li> <li> Sound attributes</li> <li>Making lists</li> </ol>

The Ordered list will look like this below. Notice you have not assigned a number to any line, but the coding figures it out.

Things I have learned

Html base code

How to align text

Font attributes

Inserting images

Image attributes

Creating links

Sound attributes

Making lists

4. Code Summary: Here is our code so far
<html> <head> <title> </title> </head> <body background="http://www.porshiana.com/water.jpg" LINK="#ffff00" vlink="#000000"> <embed src="http://www.porshiana.com/sample.mid" volume="30%" hidden="false" autostart="true loop="true" height="100"> <font color="#ffffff"> <h1 align="center"> My very first html page</h1> <font size="6"><b>Welcome to my html page <br> <center> where I am showing my html skills</center> <p align="right"><b> <font size="4"> I want to learn eveything I can about html</p> <div align="left"> So I can make cool web pages</div> <a href="http://www.porshiana.com"> <img src="http://www.porshiana.com/waterimage.jpg" align="right" height="300"> </a> If I learn how to use a image editor like adobe photoshop or jasc paint shop pro, I will be able to create pictures like these too. Then I could design entire pages. Knowing html and having an image editor are the basic requirements for web developement. I hope you enjoy my very first html page</b> <p> <a href="http://www.developingwebs.net">Developing webs</a> <a href="http://www.porshiana.com/sample.mid">This is a sample sound link</a> Reasons I like Html <ul> <li> I can make my pages as I want them</li> <li> Once I learn html, the other languages come easily</li> <li> Even if I use an html editor, I can now adjust aspects of the page</li> <li> I can look at other peoples html code to learn how to do neat things</li> </ul> Things I have learned <ol> <li> Html base code</li> <li>How to align text</li> <li>Font attributes</li> <li>Inserting images</li> <li>Image attributes</li> <li> Creating links</li> <li> Sound attributes</li> <li>Making lists</li> </ol> </font> </body> </html>

Save this in your notepad, and view it.

It is all coming together very nicely. We are almost done with our html lessons. Even though you aren't expected to memorize every little code, when you see them, you will know what they mean,
and when you need them, you will know where to find them.

We only have 2 more lessons to go, so when you are ready, lets move to lesson 9, making internal targets