-->

HTML page to insert a picture using img tag

Let's understand this with following tag.
-------------------------------------------------------------------------------
<html> <!--called root tag-->
<head> <!--it is used for meta tags-->
<title><!-- it is used for title of page-->
inserting image
</title>
</head>
<body><!--it is a container-->
<img src="glass.jpg">
<!--img src is used to insert image-->
<!-- it has attributes width,height and alt-->
<!-- 'alt' is used if the picture could not be loaded/displayed-->
<!--we must make sure that the path(of image) is correct-->
</body>
</html>

 ---------------------------------------------------------------------------------------
note: Make sure that we have picture in saem folder as that html is.

HTML page to insert background picture

Let's understand this with the help of html code.
----------------------------------------------------------------------------------------------------------
<html> <!--called root tag-->
<head> <!--it is used for meta tags-->
<title><!-- it is used for title of page-->
inserting image
</title>
</head>
<body background="coffee.jpg"><!--it is a container-->
We inserted picture as background.
<!--img src is used to insert image-->
<!-- it has attributes width,height and alt-->
<!-- 'alt' is used if the picture could not be loaded/displayed-->
<!--we must make sure that the path(of image) is correct-->
<!--it repeats the picture-->
<!-- to avoid it we use css.We will learn in css unit-->
</body>
</html>

 -------------------------------------------------------------
note:
   Before we inserrt picture, the pciture must be in same folder as that html page is.

HTML page with image

we can insert our picture using some tags. There are different tags we can work with. Let's see an example of each.
---------------------------------------------------------------------------------------------------

1) An HTML page to insert background picture.

                                                                                          click me 

2) An HTML page to insert a picture using img tag.

                                                                                          click here

                                                                                    click here (second method with attribute)

3)An html page to work with map tag. It is used to have link on some part of picture.

                                                                                    click here

                                                                                   click here(second method;using rectangle)

                                                                                    click here(third method,using circle)
                            
                                                                                    click here (forth method;using polygon)
            
                                                                                    click here (fifth method;using default)

4)An html page to work with picture tag

                                                                                     click here

HTML page with nested concept

<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="1" start="1">
<li>first country list</li>
<ol type="A" start="1">
<li>Nepal</li>
<li>India</li>
</ol>
<li>second country list</li>
<ul type="circle">
<li>China</li>
<li>Japan</li>
</ul>
</ol>
</body>
</html>

 

HTML page with nested list

<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="1" start="1">
<li>first country list</li>
<ol type="A" start="1">
<li>Nepal</li>
<li>India</li>
</ol><!--closing of ol tag-->
</ol><!--closing of ol tag-->
<ol type="1" start="2">
<li>second country list</li>
<ul type="circle">
<li>China</li>
<li>Japan</li>
</ul><!-- closing of ul tag-->
</ol> <!-- closing of ol tag-->
</body>
</html>

 

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>