A webpage layout gives a structure to the website , layout is very important to give better look to the website .
WEB SITE LAYOUT :
Header : Header Defines a header for a document or a section .
Navigation : Navigation Defines a container for navigation links .
Content : Defines a section of the page with document or article and other information .
Sidebar : Defines content aside from the main content of the page .
Footer : Defines a footer for a document or a section .
LAYOUT USING div ELEMENT :
The div element is used in this layout it is a block level element used for grouping HTML elements.
Example for div Element :
<!DOCTYPE html>
<html>
<head>
<style>
#header { background-color:steelblue; color:white; text-align:center; padding:5px; }
#nav { line-height:30px; background-color:#48D1CC; color:white; height:350px; width:110px; float:left; padding:5px; }
#section { width:350px; float:left; padding:10px; }
#footer { background-color:steelblue; color:white; clear:both; text-align:center; padding:5px; }
</style>
</head>
<body>
<div id="header">
<h1>BIG CATS</h1>
</div>
<div id="nav"> Tiger<br> Lion<br> Cheetah<br> </div>
<div id="section">
<h2>Tiger</h2>
<p> The tiger (Panthera tigris) is the largest cat species, reaching a total body length which made of up to 3.38 m (11.1 ft) over curves and weighing up to 388.7 kg (857 lb) in the wild. <p> The tiger populations occurring in small pockets isolated from each other, of which about 2,000 exist on the Indian subcontinent. </p>
</div>
</body>
</html>
LAYOUT USING TABLES :
The layout using Tables are the simplest and most popular way of creating layouts . These tables are arranged in columns and rows, so it can utilized in many ways according to the need
Example for Layout using Tables :
<!DOCTYPE html>
<html>
<head>
<title>Layout using Tables</title>
</head>
<body>
<table width="100%" border="0">
<tr>
<td colspan="2"bgcolor="steelblue"> <center>
<h1>BIG CATS</h1>
</center>
</td>
</tr>
<tr valign="top">
<td bgcolor="#48D1CC" width="50"> <b>Main Menu</b>
<br /> Tiger<br /> Lion<br /> Cheetah </td>
<td bgcolor="#eee" width="100" height="200">
The tiger (Panthera tigris) is the largest cat species </td>
</tr>
<tr>
<td colspan="2"bgcolor="steelblue">
</tr>
</table>
</body>
</html>
LAYOUT USING HTML5 :
HTML5 offers new semantic and dynamic elements that define different parts of a web page with a modern look and feel .
Example for Layout using HTML5 :
<!DOCTYPE html>
<html>
<head>
<style>
header { background-color:steelblue; color:white; text-align:center; padding:5px; }
nav { line-height:30px; background-color:#48D1CC; height:300px; width:100px; float:left; padding:5px; }
section { width:350px; float:left; padding:10px; }
footer { background-color:steelblue; color:white; clear:both; text-align:center; padding:5px; }
</style>
</head>
<body>
<header>
<h1>BIG CATS</h1>
</header>
<nav> Tiger<br> Lion<br> Cheetah<br> </nav>
<section>
<h1>Tiger</h1>
<p> The tiger (Panthera tigris) is the largest cat species, reaching a total body length which made of up to 3.38 m (11.1 ft) over curves and weighing up to 388.7 kg (857 lb) in the wild. </p>
</section>
<footer>Thanks for reaching</footer> </body>
</html>
HTML IFRAMES :
An IFrame (Inline Frame) is an HTML document embedded inside another HTML document on a website , which is displaying a web page within a web page. The IFrame HTML element is often used to insert content from another source ,it can be configured with its own scrollbar independent of the surrounding page's scrollbar.
Syntax :
<iframe src="URL"></iframe>
IFRAME HEIGHT & WIDTH :
Use the height and width attributes to specify the size of the IFRAMES ,the attribute values are specified in pixels by default, but they can also be in percent.
Example for HEIGHT & WIDTH :
<!DOCTYPE html>
<html>
<body>
<iframe src="example_iframe.htm" width="200" height="200">
</iframe>
</body>
</html>
IFRAME EDITING THE BORDER :
The border of the Iframe can be edited and changed according to the needs , By default, an iframe has a black border around it . The Iframe border size , color and style can be changed with css .
Example for IFRAME BORDER EDITING :
<!DOCTYPE html>
<html>
<body>
<iframe src="edit_exiframe.htm" style="border:4px outset red">
</iframe>
</body>
</html>
USING IFRAME AS TARGET AS LINK :
An iframe can be used as the target frame for a link ,the target attribute of the link must refer to the name attribute of the iframe
Example for IFRAME as Target Link :
<!DOCTYPE html>
<html>
<body>
<iframe width="100%" height="300px" src="d_iframe.htm" name="iframe_ex"> </iframe>
<a href="http://www.html12app.com /demo12" target="iframe_ex"> IFRAME-TARGET</a>
<p>When the target of a link matches the name of an iframe, the link will open in the iframe.</p>
</body>
</html>
To be continue NEXT POST...
Thanks for reading.
Comments