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 ©
</div>
</div>
</body>
</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 ©
</div>
</div>
</body>
</html>
» Result:
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!
No comments:
Post a Comment