Explain div & span tags and also explain layers with example.

<div> : An element in html document is either a block element (or) inline element. A block would be something like a paragraph while an inline might be something like text(or) individual character that is part of a block. Using<div> tag changing the appearance of block elements, any formatting that need adding inside the <div> tag as follows. Syntax: < div class = “ any element”>              < P > - - - </P>              < h1 > - - - </h1>              </div > Division is a logical part of the document and we cant treat divisions as individual items.

<span>: HTML no longer supports the idea of modifying individual items in a place. A simple and efficient model has been derived based around the span tag span’s are used as follows. Syntax: <span class = “ any element” > - - - - -</span> Eg: < p > my puppy has < span style = “ color: blue”> blue </span> eyes </p>. Syntax: <div id = “  “ class = “ “ style = “ “ > - - - -</div> <span id = “ “ class = “ “ style = “ “ >- - - - -</span> The <div> and <span> tags have identical parameters but the effect of those parameters are altered by the context in which they are used. Each can have ‘id’ so that it can be identified by other elements on the page. Styles are applied to <span> and <div> through either the ‘class’ or ‘style’ parameter.

Layers: The page layout that a web browser creates results from layering text and images top of each other. Web designers gives images as the background of web pages and then place further images and text over them. we can place text items and images on the top of each other in multiple layers. The layer tag is browser specific.

Powerful attributes of  <div>: Z–index: n:- The browse maintain the stack of layers of contents. The background image is placed first with the text and images on top of it. For each that you use, you can determine where in that stack it will appear by setting the ‘Z-index’ parameter. The lowest layer appearing on the top of the background has a z – index of ‘1’. Many layers can have the same z-index value if you want to place them in the same level. Position: absolute/relative: Divisions has to be placed on the screen at specific location but the placement of that layer may be either absolute (or) relative. Left:n, top:n:- A location of that division in pixels. Width:n, height:n:- The size of the division in pixels. Program: < html> < body> < div style = “position : relative;  font-size; 50 px; z–index :2; “ > layer1 </div> <div sytle = “ position: relative; top: 50; left : 5 color: Red; font – size: 80 px; z-index: 1” > layer 2 </div> < div style = “ position:relative; font-size: 50 px; z – index : 3; “ > layer 1 </div> < div sytle = “ position: relative ; top : - 50; left: 5;color: Red; font – size ; 80px ; z – index : 4; “ > layer 2 </div>  </body> </html>