-->

HTML Dl ,ol and ul tags

with the help of example, 
->we are going to understand about "dl" tag. with this, we also use dt and dd tag.
->Similarly we are going to understand about ul tag.Additionally we use li tag.
->similarly we are going to use ol tag.additionally use li tag.
->We will also understand about nested list.
-----------------------------------------------------------------------------

1) page to understand about dl tag.
                                                                                    click here

2) page to understand ul tag.

                                                                               click here


3) page to understand ol tag

                                                                                 click here.


4) page to understand nested list.
                          Here if we use one list inside another list then it is called nested nist.

                                                                                    click here
                          
                                                                                     click here (second method)


HTML with ol tag

<html> <!--is root tag/starting tag-->
<head> <!--used for meta tag-->
<title><!--used for title-->
understanding ordered list
</title>
</head>
<body><!-- is container-->
<ol type="a" start="6">
<!-- ol stands for ordered tag-->
<!--type can be 'a' or 'A' or 1 or I-->
<!--start is from 1 any other value-->
<li>grapes</li><!-- li is for list item-->
<li>Mango</li>
<li>Apple</li>
</ol><!-- closing of ol-->
</body>
</html>

 

HTML page with ul tag

<html> <!--is root tag/starting tag-->
<head> <!--used for meta tag-->
<title><!--used for title-->
understanding ordered list
</title>
</head>
<body><!--is container-->
<!-- following is unordered list-->
<ul type="square">
<!-- here type can be circle or disc or square-->
<li>Grapes</li>
<li>apple</li>
<li>Mango</li>
<li>Grapes</li>
<li>apple</li>
<li>Mango</li>
</ul><!--closing of ul-->
</body>
</html>

 

HTMl page to understand dl tag

<html> <!--is root tag/starting tag-->
<head> <!--used for meta tag-->
<title><!--used for title-->
understanding definition list
</title>
</head>
<body><!-- is container-->
<!--following is description list/definition list (dl)-->
<dl>
<dt>Nepal</dt><!-- dt is description term-->
<dd>KTM</dd><!--description data or data description-->
<dt>USA</dt>
<dd>Washinton D.C.</dd>
<dt>Pakistan</dt>
<dd>Lahore</dd>
</dl><!--closing of description-->
</body>
</html>

 

HTML with same page link

Let's type following code in editor to understand how it works.
Here we want to go from top to bottom of page.
-----------------------------------------------------------------
<html> <!--called root tag-->
<head> <!--contains meta information of page-->
<title><!--contains title of page-->
understanding hyperlink in single page 
</title>
</head>
<body>
<h1>this is upper part of page</h1>
<a href="#bottom">goto bottom</a>
<!--we use hash symbol with label for link-->
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
Learning about link<br>
<h1>This is bottom of page</h1>
<a name="bottom">We are at the bottom of page</a>
<!--we use here same name as mentioned in upper part-->
<!--we donot use here hash symbol-->
<!--it takes the page top to bottom-->
<!--we can use same process to go from bootom to top-->

</body>
</html>

 

HTML with hyperlink(External)

with the help of following code we can understand HTML hyperlink(external).
----------------------------------------------------------------------------

<html> <!--called root tag-->
    <head>      <!--contains meta information of page-->
        <title><!--contains title of page-->
        it is first page
        </title>
</head>
<body><!--contents part-->
<h2>We are talking about external link</h2>
<a href="http://www.google.com">goto google.com</a>
<!--it is called external link-->
                <!-- we have to give website where we want to switch -->

</body>
</html>