-->

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>

 

HTML with hyperlink(internal)

Go through following example.
->Suppose we are switching from pageone.html to pagetwo.html.
->We must save these two files inside same folder.
---------------------------------------------------------------------------------------------
pageone.html
----------------------------------------------------------------------------------------
<html> <!--called root tag-->
    <head>      <!--contains meta information of page-->
        <title><!--contains title of page-->
        it is first page
        </title>
</head>
<body><!--contents part-->
<h1>this is page one</h1>
<h2>We are talking about internal link</h2>
<a href="pagetwo.html">Goto page two</a>
<!--it is called internal link-->
                <!-- we use <a href> tag-->
<br>
<h2>We are talking about external link</h2>
<a href="http://www.google.com">goto google.com</a>
<!--it is called external link-->

</body>
</html>

 --------------------------------------------------------------------
pagetwo.html
----------------------------------------------------------------------------------
<html> <!--called root tag-->
<head> <!--contains meta information of page-->
<title><!--contains title of page-->
page two with image
</title>
</head>
<body><!--is container-->
<h1> this is page two</h1>
<img src="pictures\picture1.jpg" width="400px" height="400px" alt="building">
<!--it inserts an image-->
</body>
</html>

 -----------------------------------------------------------------------------------
note:-
pagetwo.html contains picture. so the picture must be saved inside pictures folder.And this folder must be inside same folder as of that two html files.
 

HTML links

We use different types of link. 
->It can be internal i.e. switching from one page to another in a site.
->It can be external i.e. we can jump from one site to another.
->single page link i.e. we can go from any part of page to any other part.

To understand this in detail, let's get into example.
-------------------------------------------------------------------------------------------
1) HTML with hyperlink(internal)

                                                     click here

2) HTML with hyperlink(external)


                                                   click here

3) HTML with same page link


                                                  click here

HTML with style(part4)

to understand CSS with HTML ,we have taken another example.
------------------------------------------------------------------------

<html>          <!--called root tag-->
    <head>      <!--contains meta information of page-->
        <title><!--contains title of page-->
        html css
        </title
    </head>
    <body style="background-color:honeydew;">
    <!--body tag with style and value-->
    <h2 style="color:blueviolet;"> page in html</h2>
    <!--applying style with property and value-->
    <B style="font-size:30px;">am learning html.</B>
    <!--applying style to tag B-->
<u style="text-align: right;">it is on left</u>    
<!--we can use left or right or justifyetc-->
</body>
</html>