Thursday, 5 December 2013

HTML » Layouts

HTML Layout

Be very careful when You design Your page, because the page layout is very important.

HTML Layouts - Using <div> Elements

The div element is a block level element used for grouping HTML elements.

» EXAMPLE:


<html>
<body>

<div id="container" style="width:500px;">

<div id="header" style="height: 50px; background: #F90;">
<h1>This is the Header.</h1>
</div>

<div id="main" style="width: 90px; height:200px; background: #CCC; float: left;">
<p><b>Menu</b></p>
<a href="http://easilylearnhtml.blogspot.com/2013/11/css-id-and-class.html" target="_blank">id</a><br />
<a href="http://easilylearnhtml.blogspot.com/2013/11/the-class-selector.html" target="_blank">class</a><br />
<a href="http://easilylearnhtml.blogspot.com/2013/11/html-forms.html" target="_blank">Forms</a><br />
<a href="http://easilylearnhtml.blogspot.com/2013/11/html-iframes.html" target="_blank">iFrames</a>
</div>

<div id="content" style="width: 500px; height: 200px; background: #0C3;">
Content goes here.
</div>

<div id="footer" style="background: #00F; text-align: center;">
Easilylearnhtml &copy;
</div>

</div>

</body>
</html>



» Result:


Content goes here.


HTML Layouts - Using Tables


A simple way of creating layouts is by using the HTML <table> tag.

You can create layout with <table> tag, this is NOT the correct use of the element. The purpose of the <table> element is to display tabular data!