Friday, 12 April 2019

Structure of Html Document





 Structure of Html Document:
 = = = = = = = = = = = = = = = 
-> Every Html document starts with <html> tag and end with </html> tag
-> the content that we prepared with in the  <html> </html> tags is divided into two sessions
     1) Head Session
     2) Body Session
  eg:
     <html>
     <head>
    <!---Head Session-->
    </head>
    <body>
   <!--Body Session-->
   </body>
  </html>

1.Head Session:
= = = = = = = = =
-> Content that is not directly display in the browser window is specified in head session.
-> Background supported content prepared in Head Session.

2.Body Session:
= = = = = = = = 
-> content that is actually display in browser window is prepared in body session.
->except the head session tags remaining all tags can be include in body.
eg:
     <h1>,<p>,<a>,<table> tags etc..

Head Section in Html Document:
= = = = = = = = = = = = = = = = =
 -> head secton may includes any of the following tags:
      1) titles
      2)styles
      3)script
      4)link
      5)meta

1.Titles:
= = = = =
 -> titke tag i sused to display a title in browser title bar.
    usage:  <title>Login Page</title>

2.Styles:
= = = = =
-> style tag is used define the styles taht are used with in the document.
    usage:
              <style>
              h1
             {
                color:Blue;
             }
           </style>
3.Script:
= = = = =
->script tag is used define the client side programming in the document.
        usage:
                 <script>
                       alert("welcome");
                 </script>
4.Links:
= = = = =
-> link tag is used to link external .css files
-> it is also used to display images in title bar
usage:
          <link rel="stylesheet"  href="mystyle.css"/>
         <link rel="shortcut ion href="logo.icon"/>
5.Meta:
= = = = = 
-> meta tag is used to provide meta data about the document the document.
    eg: keywords ,discription,authors
usage:
         <meta name="keywords" content="java,php,jQuery,.net,Anjular Js"/> 

eg: <!--example for head section tags -->
<html>
<head>
<title> welcome page</title>
<script>
 //javascript code
 alert("welcome to HTML");
</script>
<style>
h1
{
color:blue
}
</style>
<meta name="author" content="narasimha"/>
<meta name='keywords" content=".net,java,php,JQuery,Anjular Js"/>
<link rel="shortcut icon"  href="sathya.ico"/>
</head>
<body>
<h1>WELCOME TO HTML</h1>
</body>
 </html>

Body Section Tags:
 = = = = = == = = = =
-> body tag can have number of tags these tags we divided into mutliple groups.
-> in this chapter we are developing web apges using  Basic Structure tags.

1.Heading Tags:
 = = = = = = = = 
-> heading tags are used to prepare the heading for different levels.
-> Html supports six levels of heading tags 
    <h1> to <h6>
Usage:
            <h1> heading 1</h1>
           <h2> heading 2</h2>
2.paragraphs:
 = = = = = = =
-> paragraph are preapared in html using <p> tag
 usage: 
            <p>this text paragraph</p>
3.Span:
= = = 
-> span tag is used to display simple/short message
  eg: <span>message</span>

4.img tag:
 = = = = =
-> image tag is used to display the image an the web page.
 usage:
           <img src="image.jpg"/>
-> image tag support following attributes to Customize the apperance of the image.
eg:
     <img src="images/image1.jpg" height=  "200" width="300" border="2"/>

5.Div Tag:
= = = = = = 
-> div tag is used to divide the content into multiple parts /sections.
-> we can groping multiple tags and apply the style div tag.
usage:
           <div>
            <!--required content-->
           </div>
eg:
<!--create a web page to demonstrate usage heading and paragraph tags-->
<html>
<head>
<title>welcome page</title>
<style>
p
{
  text-align:justify;
  border:2px solid blue;
 padding:10px;
}
</style>
</head>
<body>
<h1>Welcome to Html</h1>
<hr>
</body>
</html>

No comments:

Post a Comment