Html Creating Lists

We've just about learned everything there is to know about text formatting, but there's still one very important thing that we have to learn.

That is called a Lists.

Lists are everywhere. We post them on our refrigerators and take them to the services market or in our store. Lists are a very efficient way to organize information. Naturally, HTML has a few tags to help you make lists.

HTML has not 1, not 2, but 3 different types of lists that you can add to your pages! They are the Ordered, Unordered, and Definition lists.

Ordered lists are exactly what the name implies, lists that follow a numerical order.

Ordered lists begin with the <OL> tag and end with a </OL> tag. When we want to put an item into this list, we need to put the tag code <LI>, or list item tag before that item.

So here’s the sample of the list syntax tag and check my sample.

========================================================================

ORDERED LIST

<title> Internet Shop </title>

What we need to put in our services or in our business store?   <P>

 <OL>

 <LI>Online games

 <LI>Repair shop

 <LI>Downloading games

 <LI>Surfing internet

<Li> or more

 </OL>

So if we preview our browser in html we made, it will looks like this.

Internet Shop

What we need to put in our services or in our business store?  

1. Online games

2. Repair shop

3. Downloading games

4. Surfing internet

5. or more

 ========================================================================

Sure thing, but what if we don’t want our list items to be numbered? That's when we use Unordered Lists.

These are also called Bulleted Lists. Bulleted lists begin with the <UL> tag, and end with the </UL> tag. They look exactly like ordered lists, except the item numbers are replaced with special characters called bullets. Here's an example of how bulleted lists are used:

We put again an example:

========================================================================

UNORDEREDLIST 

Make your design <P>

 <UL>

 <LI>Template

 <LI>Logo

 <LI>Themes

 </UL>

So if we look again our browser and check our html pages will be look like this.

Make your design

• Template
•  Logo
• Themes

========================================================================

Think that's cool? Try adding the TYPE attribute to the UL tag! With the TYPE attribute, we can change the type of bullet that we want to use! The TYPE attribute takes three arguments: "DISC", "SQUARE" or "CIRCLE". S

o our new <UL> tag with a circle bullet would look like this: <UL TYPE="circle">. The TYPE attribute can also be used in the <OL> tag to change from numbers to letters (capital[TYPE="A"] or small [TYPE="a"]), or roman numerals (uppercase[TYPE="I"] or lowercase[TYPE="i"]). If we want to make an ordered list with uppercase roman numerals, it looks like this:

========================================================================

ORDERED LIST WITH RANDOM NUMBER LIST

 <OL TYPE="I">

 The <LI> tag also has an attribute: VALUE. With the VALUE attribute, we can change the value of a list item! Take a guess, what result would the following code result in:

 <OL TYPE="A">

 <LI VALUE="2">   Are you think hard now!

 </OL>

 If you guessed "B. Think hard now!" you're right? Why? Check out the combination of the TYPE and VALUE attributes!

Here’s a little trick: we can start an ordered list with any number (or letter, if we use TYPE) with the START attribute. It looks like this:

 <OL START="3">

 <LI> Is this number 3? </OL>

 And to our viewers at home, it looks like this:

 3. Is this number 3?

========================================================================

The last list that we can use is the Definition List. Definition lists are normally used when we need to define terms. The definition list starts with the <DL> tag and ends with the </DL> tag.

Each term to be defined in a definition list uses the <DT> or Definition Term tag. Every definition in a definition list needs a <DD>, it is definition of another Word/Phrase.
So it’s would like getting headache for us about this code tag, but it’s ok that we can know what means of tag it is.

 ========================================================================

DEFINITION LIST

 <DL>

 <DT>HTML <DD> Tutorial

 <DT>Correction? <DD>is this right?

 </DL>

Now we can check in our browser how’s look the form in our browser.

HTML

Tutorial

Correction?

is this right?

This will be look in our browser.

========================================================================

Note that you can create really cool effects if you use the formatting tags inside of lists. It's really neat when you have Bold terms and Italic definitions, if you like a good list tag.

So now let’s go on in another part.

Return to:

Html Tutorial Introduction

Html Structure And Method

Basic Tags and Formatting

Adding links in Html Hyperlinks

Html Instruction Formatting Text

Html Working With Fonts

If you like to see our Flash template Design/Template Page goes here:

Template Design

See all: Our Template