Saturday, August 5, 2017

Html List

Hello every one, good morning and welcome to this section of my tutorial. Today am gonna be talking about HTML list, am sure you all are conversant with what a list is. Without wasting much time lets go down to business.
HTML offers web designers three different ways for specifying lists of information. All lists must contain one or more list elements. List may contain:

<ul> - An unordered list. This will list items using plain bullets.

<ol> - An ordered list. This will use different schemes of numbers to list your items.

<dl> - A definition list. This arranges your items in the same way as they are arranged in a dictionary.

HTML Unordered Lists
An unordered list is a collection of related items that have no special order or sequence. This list is created by using HTML <ul> tag. Each item in the list is marked with a bullet.


Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Ps2</li>
<li>Ps3</li>
<li>Ps4</li>
<li>Xbox 360</li>
<li>Laptop</li>
</ul>
</body>
</html>
You can practice the above code out for better understanding and also feel free to drop your questions.

The type Attribute 
You can use the type attribute for <ul> tag to specify the type of bullet you like. BY default, its a disc. Bellow are the possible options available:

<ul type="square">

<ul type="disc">

<ul type="circle">

Example
Below is an example where <ul type="square"> is been used

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul  type="square">
<li>Ps2</li>
<li>Ps3</li>
<li>Ps4</li>
<li>Xbox 360</li>
<li>Laptop</li>
</ul>
</body>
</html>

Example 
Another example where <ul  type="disc"> is been used


<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul  type="disc">
<li>Ps2</li>
<li>Ps3</li>
<li>Ps4</li>
<li>Xbox 360</li>
<li>Laptop</li>
</ul>
</body>
</html>

Example 
An example where the <ul type="circle"> is been used

<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul  type="circle">
<li>Ps2</li>
<li>Ps3</li>
<li>Ps4</li>
<li>Xbox 360</li>
<li>Laptop</li>
</ul>
</body>
</html>
You can try all the three atrribute examples out using your text editor to see the differences between them.

HTML Ordered Lists
 If you are required to put your items in a numbered list instead of bulleted, then HTML ordered list will be used. This list is created using <ol> tag. The numbering starts at one and is incremented by one for each successive ordered list element tagged with <li>.

Example
<!DOCTYPE html>
<html>
<head>
<title>HTML ordered List</title>
</head>
<body>
<ol>
<li>Ps2</li>
<li>Ps3</li>
<li>Ps4</li>
<li>Xbox 360</li>
<li>Laptop</li>
</ol>
</body>
</html>

The type Attribute 
You can use type attribute for <ol> tag to specify the type of numbering you like. By default, it is a number. Below are the possible options available:

<ol  type="1"> - Default-case Numerals.

<ol  type="I"> - Upper-case Numerals. 

<ol  type="i"> - Lower-case Numerals.


<ol  type="a"> - Lower-case Letters. 

<ol  type="A"> - Upper-case Letters.

Example
Following is an example with <ol type="1">

<!DOCTYPE html>
<html>
<head>
<title>HTML ordered List</title>
</head>
<body>
<ol  type="1">
<li>Ps2</li>
<li>Ps3</li>
<li>Ps4</li>
<li>Xbox 360</li>
<li>Laptop</li>
</ol>
</body>
</html>

Example
Following is an example with <ol type="I">

<!DOCTYPE html>

<html>
<head>
<title>HTML ordered List</title>
</head>
<body>
<ol  type="I">
<li>Ps2</li>
<li>Ps3</li>
<li>Ps4</li>
<li>Xbox 360</li>
<li>Laptop</li>
</ol>
</body>
</html>

Example
Following is an example with <ol type="i">

<!DOCTYPE html>
<html>
<head>
<title>HTML ordered List</title>
</head>
<body>
<ol  type="i">
<li>Ps2</li>
<li>Ps3</li>
<li>Ps4</li>
<li>Xbox 360</li>
<li>Laptop</li>
</ol>
</body>
</html>


Example
Following is an example with <ol type="A">

<!DOCTYPE html>
<html>
<head>
<title>HTML ordered List</title>
</head>
<body>
<ol  type="A">
<li>Ps2</li>
<li>Ps3</li>
<li>Ps4</li>
<li>Xbox 360</li>
<li>Laptop</li>
</ol>
</body>
</html>

Example
Following is an example with <ol type="a">

<!DOCTYPE html>
<html>
<head>
<title>HTML ordered List</title>
</head>
<body>
<ol  type="a">
<li>Ps2</li>
<li>Ps3</li>
<li>Ps4</li>
<li>Xbox 360</li>
<li>Laptop</li>
</ol>
</body>
</html>
You can try out all the type attribute examples for better understanding.

The start Attribute
You can use start attribute for <ol> tag to specify the starting point of numbering you need. Following are the possible options:

<ol type="1" start="5">      - Numerals starts with 5.

<ol type="I" start="5">      - Numerals starts with V.

<ol type="i" start="5">      - Numerals starts with v.

<ol type="a" start="5">      - Letters starts with e.

<ol type="A" start="5">      - Letters starts with E.

Example 
<!DOCTYPE html>
<html>
<head>
<title>HTML ordered List</title>
</head>
<body>
<ol  type="a"  start="5">
<li>Ps2</li>
<li>Ps3</li>
<li>Ps4</li>
<li>Xbox 360</li>
<li>Laptop</li>
</ol>
</body>
</html>

HTML Definition Lists
HTML and XHTML supports a list style which is called the definition lists where entries are listed like in a dictionary or encyclopedia. The difinition list is the ideal way to present a glossary, list terms, or other name/value list.
Definition list makes use of the following three tags

<dl>  -  Defines the start of the list

<dt>  -  A term

<dd>  -  Term definition

</dl>  -  Defines the end of the list

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>This stands for Hyper Text Markup Language</dd>
</dl>
</body>
</html>
You can practice all the above codes out using you text editor.
Well guys thats all for this tutorial, see you in my next tutorial and bye for now.

Links to previous tutorials on HTML : Html IntroductionHtml TagsHtml Document StructureThe Doctype Declaration , Html Basic Tags , Html Basic Tags2 , Html Elements , Html Attributes , Html Attribute 2 , Html Formating , Html Formatting[CONTINUATION] , Grouping Content , HTML-Phrase Tags , Html-Phrase Tags[CONCLUSION] , Html-Meta Tags , Html-Comments , Html Images , Html Tables , Html Tables(Conclusion)
Share:

0 comments:

Post a Comment