Html lists

Posted on Updated on

9879797Html lists:

Html lists are very useful in websites for show the category of the items. Navigation bars are made with the help of the lists. Website is incomplete without the lists. Let think about any website without menu bar its incomplete .Html provide list tag.

We have two types of lists:

1. Order list

2. Un order list

Order list

Order list is come with the numeric 1,2,3,4 and so on. We use < ol > tag to make order list. We can change the format of 1,2,3,to I,II,III, with the help of CSS. But as default its generate 1234 and so on.

< ol > := order list it show the list order wise.

< li > := it show the list items

Syntax:

< ol >

< li > List data which is shown by the list < / li >

.

.

.

< li > list last item data < / li >

< / ol >

Now try a example :

< ol >

< li > hello dear how are you < / li >

< li > hello dear how are you < / li >

< li > hello dear how are you < / li >

< li > hello dear how are you < / li >

< / ol >

In this code order list shown its start with the < ol > tag and end with < / ol > . List items < li > contain the data hello how are you dear we can write the list as we want .

Output

1. Hello dear how are you

2. Hello dear how are you

3. Hello dear how are you

4. Hello dear how are you

Note: we can remove the numbers with help of css property list-style:none;. It is block tag.

Unorder list:

Second type of list is unordered list in this type of list dots are shown on the place of numbers. We can change the shape of the dots with help of css( list-style: ).

< ul > tag is use to make the unordered list .

< li > tag is use for list items.

Syntax:

< ul >

< li > put code over here < / li >

.

.

.

.

< / li >

< / ul >

Now try example:

< ul >

< li > Hello dear how are you < / li >

< li > Hello dear how are you < / li >

< li > Hello dear how are you < / li >

< li > Hello dear how are you < / li >

< / ul >

In this code unordered list shown its start with the < ul > tag and end with < / ul > . List items < li > contain the data hello how are you dear we can write the list as we want.

Output:

 Hello dear how are you

 Hello dear how are you

 Hello dear how are you

 Hello dear how are you

Note: we can remove the numbers with help of css property list-style:none;. It is block tag.

We can make square place on dots with help of css.

< html >

< head >

< style >

Ul li

{

List-style: square;

}

< / style >

< / head >

< body >

< ul >

< li > Hello dear how are you < / li >

< li > Hello dear how are you < / li >

< li > Hello dear how are you < / li >

< li > Hello dear how are you < / li >

< / ul >

< / body >

< / html >

For more details and queries please feel free to email, visit or call us. Wishing you the very best for all your future endeavors.

Helpline: 9814666333, 8699444666

Email:info@technocampus.co.in

**************************************************************************************************************

Please fill the FORM and we shall contact you soon.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s