Pages

Friday, May 9, 2014

HTML Lists



You can list out your items, subjects or menu in the form of a list. HTML gives you three different types of lists.
·         <ul> - An unordered list. This will list items using bullets
·         <ol> - A ordered list. This will use different schemes of numbers to list your items
·         <dl> - A definition list. This is arrange your items in the same way as they are arranged in a dictionary.

 

The most common HTML lists are ordered and unordered lists:

HTML Lists:

An ordered list:

1.     The first list item
2.     The second list item
3.     The third list item

An unordered list:

  • List item
  • List item
  • List item

 

HTML Ordered Lists:

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items are marked with numbers.
Example :1
<ol>
<li>Web design</li>
<li>Graphic design</li>
<li>SEO</li>
</ol>
This will produce following result:
1.     Web design
2.     Graphic design
3.     SEO
The typical browser formats the contents of an ordered list just like an unordered list, except that the items are numbered instead of bulleted. The numbering starts at one and is incremented by one for each successive ordered list element tagged with <li>
This list is created by using <ol> tag. Each item in the list is marked with a number.
One Movie list is given below:
Example: 2
<center>
<h2>OUR IT COURCES</h2>
</center>
<ol>
<li>Web design</li>
<li>Graphic design</li>
<li>SEO</li>
<li>Networking</li>
</ol>         
This will produce following result:

OUR IT COURCES

1.     Web design
2.     Graphic design
3.     SEO
4.     Networking

You can use type attribute to specify the type of numbers you like. By default its is a generic numbers. Following are the other possible way:
<ol type="I"> - Upper-Case Numerals.
<ol type="i"> - Lower-Case Numerals.
<ol type="a"> - Lower-Case Letters.
<ol type="A"> - Upper-Case Letters.

<ol type="I">
<ol type="i">
<ol type="a">
<ol type="A">
       I.            Web design
    II.            Graphic design
 III.            SEO
IV.            Networking
        i.            Web design
      ii.            Graphic design
    iii.            SEO
   iv.            Networking
a.      Web design
b.     Graphic design
c.     SEO
d.     Networking
A.   Web design
B.    Graphic design
C.   SEO
D.   Networking
You can use start attribute to specify the beginning of any index. By default its is a first number or character. In the following example index starts from 5:

Example :3
<center>
<h2>OUR IT COURCES</h2>
</center>
<ol start="5">
<li>Data entry</li>
<li>Internet marketing</li>
<li>MS Office</li>
<li>SEM</li>
</ol>
This will produce following result:

OUR IT COURCES

5.     Data entry
6.     Internet marketing
7.     MS Office
8.     SEM




Type Attributes:
Format: <ol type=”letter”or number>…………..</ol>
<!DOCTYPE html><html><head><title> example of ordered
list</title></head><body><h1> NOVA
COURSES</h1><strong>Programming Courses</strong><ol><li>C/C++
Programing.</li><li>Access Programing.</li><li>Visual Basic
Programing.</li><li>Java Programing.</li><li>Flash
Scripting.</li></ol><strong>Programming Courses</strong><ol
type="A"><li>C/C++ Programing.</li><li>Access
Programing.</li><li>Visual Basic Programing.</li><li>Java
Programing.</li><li>Flash
Scripting.</li></ol><p><strong>Multimedia
Courses</strong></p><ol type="a"><li> Graphics
Courses.</li><li> Editing Courses.</li><li> 2D Animation
Courses.</li><li> 3D Animation
Courses.</li></ol><strong>Programming Courses</strong><ol
type="I"><li>C/C++ Programing.</li><li>Access
Programing.</li><li>Visual Basic Programing.</li><li>Java
Programing.</li><li>Flash
Scripting.</li></ol><p><strong>Multimedia
Courses</strong></p><ol type="i"><li> Graphics
Courses.</li><li> Editing Courses.</li><li> 2D Animation
Courses.</li><li> 3D Animation Courses.</li></ol></body>
List
Result:
NOVA COURSES
Programming Courses
  1. C/C++ Programing.
  2. Access Programing.
  3. Visual Basic Programing.
  4. Java Programing.
  5. Flash Scripting.
Programming Courses
  1. C/C++ Programing.
  2. Access Programing.
  3. Visual Basic Programing.
  4. Java Programing.
  5. Flash Scripting.
Multimedia Courses
a.      Graphics Courses.
b.     Editing Courses.
c.      2D Animation Courses.
d.     3D Animation Courses.
Programming Courses
  1. C/C++ Programing.
  2. Access Programing.
  3. Visual Basic Programing.
  4. Java Programing.
  5. Flash Scripting.
Multimedia Courses
        i.            Graphics Courses.
      ii.            Editing Courses.
    iii.            2D Animation Courses.
   iv.            3D Animation Courses.



HTML Unordered Lists:

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items are marked with bullets (typically small black circles).
Example : 1
<ul>
<li>Web design</li>
<li>Graphic design</li>
<li>SEO</li>
</ul>
This will produce following result:
  • Web design
  • Graphic design
  • SEO

Example : 2
<center>
<h2>OUR IT COURCES</h2>
</center>
<ul>
<li>Web design</li>
<li>Graphic design</li>
<li>SEO</li>
<li>Networking</li>
</ul>
This will produce following result:

OUR IT COURCES

  • Web design
  • Graphic design
  • SEO
  • Networking
You can use type attribute to specify the type of bullet you like. By default its is a disc. Following are the possible way:
<ul type="square">
<ul type="disc">
<ul type="circle">

<ul type="square">
<ul type="disc">
<ul type="circle">
  • Web design
  • Graphic design
  • SEO
  • Networking
  • Web design
  • Graphic design
  • SEO
  • Networking
  • Web design
  • Graphic design
  • SEO
  • Networking




Demonstrates different types of unordered lists source:
Example : 3
<!DOCTYPE html>
<html>
<body>
            
<p><b>Note:</b> The type attribute of the ul tag is
deprecated in HTML 4, and is not supported in HTML5.
Therefore we have used the style attribute and the CSS list-
style-type property, to define different types of unordered
lists below:</p>

<h4>Disc bullets list:</h4>
<ul style="list-style-type:disc">
 <li>Web design</li>
 <li>Graphic design</li>
 <li>SEO</li>
 <li>Networking</li>
</ul> 

<h4>Circle bullets list:</h4>
<ul style="list-style-type:circle">
 <li>Web design</li>
 <li>Graphic design</li>
 <li>SEO</li>
 <li>Networking</li>
</ul> 

<h4>Square bullets list:</h4>
<ul style="list-style-type:square">
 <li>Web design</li>
 <li>Graphic design</li>
 <li>SEO</li>
 <li>Networking</li>
</ul>

</body>
</html>
This will produce following result:
Note: The type attribute of the ul tag is deprecated in HTML 4, and is not supported in HTML5. Therefore we have used the style attribute and the CSS list- style-type property, to define different types of unordered lists below:

Disc bullets list:

  • Web design
  • Graphic design
  • SEO
  • Networking

Circle bullets list:

  • Web design
  • Graphic design
  • SEO
  • Networking

Square bullets list:

  • Web design
  • Graphic design
  • SEO
  • Networking


Demonstrates how you can nest lists source:
Example : 4
<!DOCTYPE html>
<html>
<head>
<title> example of nested ordered list</title>
</head>
<body>
<h1> OUR IT COURSES</h1>
<p><strong>Programming Courses</p></strong>
<ol type="A">
<li>C/C++ Programing.</li>
<li>Access Programing.</li>
<li>Visual Basic Programing.</li>
<li>Java Programing.</li>
<li>Flash Scripting.</li>
</ol>       
<p><strong>Multimedia Courses</strong></p>
<ol type="1">
<li> Graphics Courses.
<ol type="I" >
<li> Photoshop.</li>
<li> Illustrator.</li>
<li> Page Making.
<ol type="i" >
<li> Quark Xpress.</li>
<li> Page Making.</li>
<li> In Disign.</li>
</ol>
</li>
</ol>
<li>Editing Course </li>
<li>2D/3D Animation Course</li>
</ol>
</body>
</html>
This will produce following result:
OUR IT COURSES
Programming Courses
A.    C/C++ Programing.
B.    Access Programing.
C.    Visual Basic Programing.
D.   Java Programing.
E.    Flash Scripting.
Multimedia Courses
1.     Graphics Courses.
                               I.            Photoshop.
                            II.            Illustrator.
                         III.            Page Making.
                                                        i.            Quark Xpress.
                                                      ii.            Page Making.
                                                    iii.            In Disign.
2.     Editing Course
3.     2D/3D Animation Course



HTML Definition Lists:

HTML and XHTML also support a list style entirely different from the ordered and unordered lists we have discussed so far - definition lists . Like the entries you find in a dictionary or encyclopedia, complete with text, pictures, and other multimedia elements, the Definition List is the ideal way to present a glossary, list of terms, or other name/value list.
Definition List makes use of following three tags.
  • <dl> - Defines the start of the list
  • <dt> - A term
  • <dd> - Term definition
  • </dl> - Defines the end of the list
Format: <dl>………….</dl>

Example:1


<!DOCTYPE html>
<html>
<head>
<title> example of definition list</title>
</head>
<body>
<dl>
<h2><dt> Word Processor</h2></dt>
<dd>Microsoft Word is a word processing program. It is use to Write application, News Letter, Writting Pad, etc. You can change its background color, Even though you can replace the background by a picture. </dd>

<dt><h2>Spread Sheet</h2>
<dd>Microsoft Excel is a Spread Sheet program. Its devided by Row and Column. You can make chart using Excel. You can solve any kind of arethmatic Program by using it. </dd>
</dl>
</body>
</html>

Result:

Word Processor

Microsoft Word is a word processing program. It is use to Write application, News Letter, Writting Pad, etc. You can change its background color, Even though you can replace the background by a picture.

Spread Sheet

Microsoft Excel is a Spread Sheet program. Its devided by Row and Column. You can make chart using Excel. You can solve any kind of arethmatic Program by using it.



Appropriate List Usage:

Following are just a suggestion and there is no hard and fast rule to use them:
Use unordered lists for:
·         Link collections
·         Short, nonsequenced groups of text
·         Emphasizing the high points of a presentation
Use ordered lists for:
·         Tables of contents
·         Sets of sequential sections of text
·         Assigning numbers to short phrases that can be referenced elsewhere
Use definition lists for:
·         Glossaries
·         Custom bullets - make the item after the <dt> tag an icon-sized bullet image)
·         Any list of name/value pairs


Basic Notes - Useful Tips

Tip: Inside a list item you can put text, line breaks, images, links, other lists, etc.




HTML List Tags:

HTML <ol> Tag

2 different ordered lists:
<ol>
 <li>Web design</li>
  <li>Graphic design</li>
  <li>SEO</li>
</ol>

<ol start="50">
  <li>Web design</li>
  <li>Graphic design</li>
  <li>SEO</li>
</ol>

Definition and Usage

The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.
Use the <li> tag to define list items.

Tips and Notes

Tip: For unordered list, use the <ul> tag.
Tip: Use CSS to style lists.




HTML <ul> Tag:

An unordered HTML list:
<ul>
  <li>Web design</li>
  <li>Graphic design</li>
  <li>SEO</li>
</ul>

Definition and Usage

The <ul> tag defines an unordered (bulleted) list.
Use the <ul> tag together with the <li> tag to create unordered lists.

Tips and Notes

Tip: Use CSS to style lists.
Tip: To create ordered lists, use the <ol> tag.




HTML <li> Tag:

One ordered (<ol>) and one unordered (<ul>) HTML list:
<ol>
  <li>Web design</li>
  <li>Graphic design</li>
  <li>SEO</li>
</ol>

<ul>
  <li>Web design</li>
  <li>Graphic design</li>
  <li>SEO</li>
</ul>

Definition and Usage

The <li> tag defines a list item.
The <li> tag is used in ordered lists(<ol>), unordered lists (<ul>), and in menu lists (<menu>).

Differences Between HTML 4.01 and HTML5

The "type" attribute was deprecated in HTML 4.01, and is NOT supported in HTML5.
The "value" attribute was deprecated in HTML 4.01, but IS supported in HTML5.

Tips and Notes

Tip: Use CSS to define the type of list.




HTML <dl> Tag:

Example

A description list, with terms and descriptions:
<dl>
  <dt>Coffee</dt>
    <dd>Black hot drink</dd>
  <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

Definition and Usage

The <dl> tag defines a description list.
The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name).

Differences between HTML 4.01 and HTML5

In HTML 4.01, the <dl> tag defines a definition list.
In HTML 5, the <dl> tag defines a description list.





HTML <dt> Tag:

A description list, with terms and descriptions:
<dl>
 <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

Definition and Usage

The <dt> tag defines a term/name in a description list.
The <dt> tag is used in conjunction with <dl> (defines a description list) and <dd> (describes each term/name).



HTML <dd> Tag:

A description list, with terms and descriptions:
<dl>
 <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

Definition and Usage

The <dd> tag is used to describe a term/name in a description list.
The <dd> tag is used in conjunction with <dl> (defines a description list) and <dt> (defines terms/names).
Inside a <dd> tag you can put paragraphs, line breaks, images, links, lists, etc.
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)