husniakbarblog.blogspot.com: HTML Part 5

HTML LIST

HTML Unordered Lists

HTML offers web authors three ways for specifying lists of information. All lists must contain one or more list elements. Lists 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.

The type Attribute

You can use type attribute for <ul> tag to specify the type of bullet you like. By default it is a disc. Following are the possible options:

Syntax:


<ul type="square">
<ul type="disc">
<ul type = “circle”>

Example 1:

Default value of type attribute in unordered list is “disc”.


<!DOCTYPE html>
<html>
<head>
    <title>HTML Unordered List</title>
</head>
<body>
    <ul>
    <li>C</li>
    <li>C++</li>
    <li>Java</li>
    <li>HTML</li>
   </ul>
</body>
</html>

Output:

C
    C++
    Java
    HTML

Example 2:

Following is an example where we used
<ul type="square">


<!DOCTYPE html>
<html>
    <head>
        <title>HTML Unordered List</title>
    </head>
    <body>
        <ul type=”square”>
        <li>C</li>
        <li>C++</li>
        <li>Java</li>
        <li>HTML</li>
        </ul>
    </body>
</html>

Output:

C
    C++
    Java
    HTML

Example 3:

Following is an example where we used
<ul type="circle">


<!DOCTYPE html>
<html>
    <head>
        <title>HTML Unordered List</title>
    </head>
<body>
   <ul type="circle">
    <li>C</li>
    <li>C++</li>
    <li>Java</li>
    <li>HTML</li>
    </ul>
</body>
</html>

Output :

    C
    C++
    Java
    HTML

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 by using <ol> tag. The numbering starts at one and is incremented by one for each successive ordered list element tagged with <li>.

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.

Following are the possible options:

Example 1:

default value of type attribute in ordered list is “1”.


<!DOCTYPE html>
<html>
    <head>
        <title>HTML Ordered List</title>
    </head>
    <body>
        <ol>
            <li>C</li>
            <li>C++</li>
            <li>Java</li>
            <li>HTML</li>
        </ol>
    </body>
</html>

Output :

C++

Java

HTML

Example 2:

Following is an example where we used
<ol type="I">


<!DOCTYPE html>
<html>
    <head>
        <title>HTML Ordered List</title>
    </head>
<body>
   <ol type="I">
        <li>C</li>
        <li>C++</li>
        <li>Java</li>
        <li>HTML</li>
   </ol>
</body>
</html>

Output :

C++

Java

HTML

Example 3:

Following is an example where we used
<ol type="i">


<!DOCTYPE html>
<html>
    <head>
        <title>HTML Ordered List</title>
    </head>
<body>
   <ol type="i">
        <li>C</li>
        <li>C++</li>
        <li>Java</li>
        <li>HTML</li>
   </ol>
</body>
</html>

Output :

C++

Java

HTML

Example 4:

Following is an example where we used
<ol type="A">


<!DOCTYPE html>
<html>
    <head>
        <title>HTML Ordered List</title>
    </head>
<body>
   <ol type="A">
        <li>C</li>
        <li>C++</li>
        <li>Java</li>
        <li>HTML</li>
   </ol>
</body>
</html>

Output :

C++

Java

HTML

Example 5:

Following is an example where we used
<ol type="a">


<!DOCTYPE html>
<html>
    <head>
        <title>HTML Ordered List</title>
    </head>
<body>
   <ol type="a">
        <li>C</li>
        <li>C++</li>
        <li>Java</li>
        <li>HTML</li>
   </ol>
</body>
</html>

Output :

C++

Java

HTML

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="4">    - Numerals starts with 4.

<ol type="I" start="4">    - Numerals starts with IV.

<ol type="i" start="4">    - Numerals starts with iv.

<ol type="a" start="4">    - Letters starts with d.

<ol type=”A” start=”4”>    -Letters starts with D.

Example :

Following is an example where we used <ol type="i" start="4" >


<!DOCTYPE html>
<html>
    <head>
        <title>HTML Ordered List</title>
    </head>
<body>
   <ol type="i" start="4">
        <li>C</li>
        <li>C++</li>
        <li>Java</li>
        <li>HTML</li>
   </ol>
</body>
</html>

Output :

C
C++
Java
HTML

HTML Definition Lists

HTML and XHTML support a list style which is called definition lists where entries are listed like in a dictionary or encyclopedia. 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

Example :


<!DOCTYPE html>
<html>
    <head>
        <title>HTML Definition List</title>
    </head>
<body>
<dl>
    <dt><b>HTML</b></dt>
    <dd>This stands for Hyper Text Markup Langu
        age</dd>
    <dt><b>HTTP</b></dt>
    <dd>This stands for Hyper Text Transfer Pro
        tocol</dd>
</dl>
</body>
</html>

Output :

HTML: This stands for Hyper Text Markup Langu age
HTTP: This stands for Hyper Text Transfer Protocol

husniakbarblog.blogspot.com

AsegGasiaBlog

HTML Part 5

Popular Posts

Label

Ads

Ad Code

Python