-->

HTML with meta tag


<html>          <!--called root tag-->
    <head>      <!--contains meta information of page-->
        <title><!--contains title of page-->
        html with metatag;it is used to have page deescription,keyword,character set,author etc.
        </title>
        <meta charset="utf-8"><!--it is used for chracter set-->
        <meta name="description" content="html examples"><!--it is for description of webpage-->
        <meta name="keywords" content="HTML, C, c++, JavaScript"><!--it is used for keywords for search engines-->
        <meta name="author" content="Krishna"><!--it is used for author name-->
        <meta http-equiv="refresh" content="3"><!--it refreshes the page in every 3 seconds-->


        

    </head>
    
    <body>
        we have used meta tag in our page as shown inside head tag.
    </body>
</html>

HTML file path

If We have stored files in different folders or  folders are located in other folder  then how can we work?
------------------------------------------------------------------------------------------------------------
1)HTML with simple path

                                                                click

2)HTML with files which are in other folders.

                                                             click here
--------------------------------------------------------------------------
note:
       It is also called relative file path.

Where as if we give full URL as path to particular file, it is called absolute file path.

HTML with files which are in other folders.

If we have stored files in folders which are one(more) level up. We use .. for paths.
---------------------------------------------------------------------------------------------
<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="../pictures/picture.jpg"><!--it is a container-->
We inserted picture as background.
<!--the picture is outsideside(one level up) pictures folder-->
<!--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>

 ---------------------------------------------------------
two dots(..) denotes files are in one level up the folder.
----------------------------------------------------------------------------------------------------------------------
or
---------------------------------------------------------------------------------
<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="../pictures/picture.jpg"><!--it is a container-->
We inserted picture as background.
<!--the picture is outsideside(one level up) pictures folder-->
<!--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>

 

HTML with simple path

-----------------------------------------------------------------
<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="pictures/picture.jpg"><!--it is a container-->
We inserted picture as background.
<!--the picture is inside pictures folder-->
<!--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>

 --------------------------------------------------------------------------------------------------------------------
for a file in which is inside a folder, we use simply slash .

HTML page with iframe tag

Let's follow the example to understand working of iframe.
---------------------------------------------------------------------------------------------------------

<html>          <!--called root tag-->
    <head>      <!--contains meta information of page-->
        <title><!--contains title of page-->
        html with iframe;it is used to display page's content inside another page.
        </title>
    </head>
    
    <body>
        <h2> page in html</h2>
        <h1>this is heading</h1>
        <iframe width="100%" height="500px" name="dis_a"></iframe>
        <!--uses given width and height with name. This name is used as target-->
        <a href="heading.html" target="dis_a">click for heading</a>
        <!--we display the content of heading.html to that frame which has name "dis_a"-->
    </body>
</html>

HTML block and inline:

We can take following examples to understand about inline and block concept.
---------------------------------------------------------------------------------------------------------
1) HTML page to understand inline concept(using span).

                                                                                  click the solution

2)HTML page to understand inline concept using div.

                                                                                     click the solution

3)HTML page to understand block concept.

                                                                                       click here

HTML page to understand block concept.

Here is a quick example to understand about block concept.
--------------------------------------------------------------------------------------------------
<html> <!--root tag-->
<head> <!--meta tag-->
<title><!--title tag-->
html block  concept
</title>
</head>
<body><!--body tag; it is a container-->
<p>learning block concept. In this the text is placed in different line.It  breaks the line.t</p>
<!--A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
examples are:
address
article,fieldset,nav,header,table etc
      -->

</body>
</html>