PROJECT CODE

                                            The Developers Choice!!!!
                                                                                                            Home | About Us | Contact Us

HTML TUTORIALS

Lecture18 : Layouts

What is Website Layout
Web page layout is very important to make your website look good. Design your webpage layout very carefully because single error change layouts. Most websites have put their content inside the <div> or <table> elements. both element used as container. CSS are used to create backgrounds or colorful look for the pages.
What is HTML <div> Layout
The <div> tag is nothing more than a container unit that encapsulates other page elements and divides the HTML document into sections. Web developers use <div> elements to group together HTML elements and apply CSS styles to many elements at once. For instance, by wrapping a set of paragraph elements into a <div> element, the developer can take advantage of CSS styles and apply a font to all paragraphs at once by applying a font style to the <div> tag instead of coding the same style for each paragraph element.
How to use HTML <div> Layout
The HTML <div> tag is used for defining a section of your document .Inside div you can keep image, content, layout, designing of website etc.

<div id="container" style="width:500px">
<div id="header" style="background-color:red;">
<h1 style="margin-bottom:0;">Title Name</h1></div>
<div id="menu" style="background-color:yellow;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML5<br>
CSS3<br>
JavaScript</div>
<div id="content" style="background-color:blue;height:200px;width:400px;float:left;">
Content write here</div>
<div id="footer"style="background-color:red;clear:both;text-align:center;">
Copyright © projectcode.co.in</div>

How to implement HTML <div> Layout
Example :
<!DOCTYPE html>
<html>
<body>

<div id="container" style="width:500px">
<div id="header" style="background-color:red;">
<h1 style="margin-bottom:0;">Title Name</h1></div>
<div id="menu" style="background-color:yellow;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML5<br>
CSS3<br>
JavaScript</div>
<div id="content" style="background-color:blue;height:200px;width:400px;float:left;">
Content write here</div>
<div id="footer"style="background-color:red;clear:both;text-align:center;">
Copyright © projectcode.co.in</div>

</body>
</html>

Output :

layout
What is HTML <table> Layout
A simple way of creating layouts is by using the HTML <table> tag. We can create number of row and number of column with using <div> or <table> elements. CSS are used to design the div and table with using property of CSS like bacground color,height, width etc. Table are used to stored data in tabular form.
How to use HTML <table> Layout
The <table> tag is used to create layout bt using table.The HTML Table Element <table> represents data in two dimensions or more. We used CSS to design table bacground color,height, width etc.Table are used to stored data in tabular form.

<table style="width:500px;" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" style="background-color:yellow;">
<h1 style="margin:0;padding:0;">Title Name</h1>
</td>
</tr>
<tr>
<td style="background-color:silver;width:100px;vertical-align:top;">
<b>Menu</b><br>
Ajax<br>
C#<br>
Java </td>
<td style="background-color:teal;height:200px;width:400px;vertical-align:top;">
Content write here</td>
</tr>
<tr>
<td colspan="2" style="background-color:yellow;text-align:center;">
Copyright © www.projectcode.co.in</td>
</tr>
</table>
How to implement HTML <table> Layouts
Example :
<!DOCTYPE html>
<html>
<body>

<table style="width:500px;" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" style="background-color:yellow;">
<h1 style="margin:0;padding:0;">Title Name</h1>
</td>
</tr>
<tr>
<td style="background-color:silver;width:100px;vertical-align:top;">
<b>Menu</b><br>
Ajax<br>
C#<br>
Java </td>
<td style="background-color:teal;height:200px;width:400px;vertical-align:top;">
Content write here</td>
</tr>
<tr>
<td colspan="2" style="background-color:yellow;text-align:center;">
Copyright © www.projectcode.co.in</td>
</tr>
</table>

</body>
</html>

Output :

table
   
All Rights Reserved with Project code