Web page layout is very important to give better look to your website. You should design your webpage layout very carefully.
You may have noticed that there are many websites which have put their content in multiple columns - they are formatted like a magazine or newspaper. This is easily achieved by using tables or division or span tags. Sometime you use CSS as well to position various elements or to create backgrounds or colorful look for the pages.
Most websites have put their content in multiple columns (formatted like a magazine or newspaper).
Multiple columns are created by using <div> or <table> elements. CSS are used to position elements, or to create backgrounds or colorful look for the pages.
HTML Layouts - Using <div> Elements:
The div element is a block level element used for grouping HTML elements. While the div tag is a block-level element, the HTML span element is used for grouping elements at an inline level.
Although we can achieve pretty nice layouts with HTML tables, tables weren't really designed as a layout tool. Tables are more suited to presenting tabular data.
You can achieve same result whatever you have achieved using <table> tag in previous example.
Format: <div>……………….</div>
Example : 1
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-
color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScr ipt</div>
<div id="content" style="background-
color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © creativedesignbest.blogspot.com</div>
</div>
</body>
</html>
This will
produce following result:
Main
Title of Web Page
Menu
HTML
CSS
JavaScr ipt
HTML
CSS
JavaScr ipt
HTML Layouts - Using DIV, SPAN:
Example : 2
<div style="width:100%">
<div style="background-color:#CC99FF;">
<b style="font-size:150%">This is Web Page Main title</b>
</div>
<div style="background-color:#FFCCFF; height:200px;width:100px;float:left;">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</div>
<div style="background-color:#eeeeee; height:200px;width:300px;float:left;">
Technical and Managerial Tutorials
</div>
<div style="background-color:#CC99FF;clear:both">
<center>
Copyright © creativedesignbest.blogspot.com
</center>
</div>
</div>
This will produce following result:
This is Web Page Main title
Main Menu
HTML
PHP
PERL...
HTML
PHP
PERL...
Technical and Managerial Tutorials
Example: 3
<!DOCTYPE html>
<html>
<head>
<title> example of Layout7 </title>
</head>
<body>
<div style="width:500px">
<div style="background-color:#00CCFF;height:25px;">
Header </div>
<div style="background-color:#9999FF;height:25px;">
Home menu </div>
<div id="menu" style="background-color:#00CCFF;height:200px;width:100px;float:left;">
Left Side Bar
</div>
<div style="background-color:#CCFFFF;height:200px;width:300px; float:left;">
Title and Content. </div>
<div style="background-color:#00CCFF;height:200px;width:100px;float:left;">
Right Side Bar
</div>
<div style="background-color:#CCCCFF;">
Footer </div>
</div>
</body>
</html>
Example: 4
<!DOCTYPE html>
<html>
<head>
<title> example of Layout6 </title>
</head>
<body>
<div style="width:500px">
<div style="background-color:#0099FF;text-align:center;">
<h1 style="margin-bottom:0;">Belal'sdesign</h1></div>
<div style="background-color:#9999FF;height:25px;width:500px;float:left;">
Home </a>
Books
Tutorials
About Us
Contact Us </div>
<div style="background-color:#00CCFF;height:200px;width:100px;float:left;">
<b>LINK</b> <br />
Link1<br />
Link2<br />
Link3
</div>
<div style="background-color:#CCFFFF;height:200px;width:300px;float:left;">
Title and Content. Title and Content. Title and Content. Title and Content. Title and
Content. Title and Content. Title and Content. Title and Content. Title and Content.
Title and Content. Title and Content. Title and Content. Title and Content. Title and
Content.</div>
<div style="background-color:#00CCFF;height:200px;width:100px;float:left;">
<b>Adsence</b><br />
Add1<br />
Add2<br />
Add3
</div>
<div style="background-color:#CCCCFF;clear:both;text-align:center;">
Copyright © creativedesignbest.blogspot.com</div>
</div>
</body>
</html>
This will produce following result:
Example: 4
Belal'sdesign
Home Books Tutorials About Us Contact Us
LINK
Link1
Link2
Link3
Link1
Link2
Link3
Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content.
Adsence
Add1
Add2
Add3
Add1
Add2
Add3
Copyright © creativedesignbest.blogspot.com
HTML layout with Div and table:
<!DOCTYPE html>
<html>
<head>
<title> example of Layout9 </title>
</head>
<body>
<div style="width:500px">
<div style="background-color:#0099FF;text-align:center;">
<h1 style="margin-bottom:0;">Belal'design</h1></div>
<div style="background-color:#9999FF; height:25px; width:500px; float:left;">
Home </a>
Books
Tutorials
About Us
Contact Us </div>
<div style="background-color:#00CCFF; height:200px; width:100px; float:left;">
<b>LINK</b> <br />
Link1<br />
Link2<br />
Link3
</div>
<div style="background-color:#CCFFFF; height:200px; width:300px; float:left;">
Title and Content.
<table border="1"style="height:150px;">
<tr>
<td style="width:150px;" >Sub Title1</td>
<td>
<p style="font-size: 10;">
<b>Sub Title2</b> <br />
content2 content2 content2
</p>
<p style="font-size: 10;">
<b>Sub Title3</b><br>
content3 content3 content3
</p>
</td>
</tr>
</table>
</div>
<div style="background-color:#00CCFF; height:200px; width:100px; float:left;">
<b>Adsence</b><br />
Add1<br />
Add2<br />
Add3
</div>
<div style="background-color:#CCCCFF;clear:both;text-align:center;">
Copyright © creativedesignbest.blogspot.com</div>
</div>
</body>
</html>
This will produce following result:
Belal'design
Home Books Tutorials About Us Contact Us
LINK
Link1
Link2
Link3
Link1
Link2
Link3
Title and Content.
Sub Title1
|
Sub Title2
content2 content2 content2
Sub Title3
content3 content3 content3 |
Adsence
Add1
Add2
Add3
Add1
Add2
Add3
Copyright © creativedesignbest.blogspot.com
HTML Layouts - Using Tables:
A simple way of creating layouts is by using the HTML <table> tag.
Multiple columns are created by using <div> or <table> elements. CSS are used to position elements, or to create backgrounds or colorful look for the pages.
Note: Using <table> to create a nice layout is NOT the correct use of the element. The purpose of the <table> element is to display tabular data!
The following example uses a table with 3 rows and 2 columns - the first and last row spans both columns using the colspan attribute:
Example :1
<!DOCTYPE html>
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © creativedesignbest.blogspot.com</td>
</tr>
</table>
</body>
</html>
This will produce following result:
Main Title of Web Page
| |
Menu
HTML CSS JavaScript |
Content goes here
|
Copyright © creativedesignbest.blogspot.com
| |
Multiuple Columns Layouts - Using Tables:
You can design your webpage to put your web content in multiple pages. You can keep your content in middle column and you can use left column to use menu and right column can be used to put advertisement or some other stuff. It will be very similar to our site tutorialspoint.com.
Here is an example to create three column layout:
Example : 2
<table width="100%" border="0">
<tr valign="top">
<td style="background-color:#FFCCFF;width:20%;
text-align:top;">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td style="background-color:#eeeeee;height:200px;
width:60%;text-align:top;">
Technical and Managerial Tutorials
</td>
<td style="background-color:#FFCCFF;
width:20%;text-align:top;">
<b>Right Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
</tr>
<table>
This will produce following result:
|
Example : 3
<table cellspacing="1" cellpadding="0" border="0"
bgcolor="black" id="shell" height="250" width="400">
<tr height="50">
<td colspan="2" bgcolor="white">
<table title="Banner" id="banner" border="0">
<tr><td>Place a banner here</td></tr>
</table>
</td>
</tr>
<tr height="200">
<td bgcolor="white">
<table id="navigation" title="Navigation"
border="0">
<tr><td>Links!</td></tr>
<tr><td>Links!</td></tr>
<tr><td>Links!</td></tr>
</table>
</td><td bgcolor="white">
<table title="Content" id="content" border="0">
<tr><td>Content goes here</td></tr>
</table>
</td>
</tr>
</table>
| |||||
|
| ||||
Table layout:4
<!DOCTYPE html>
<html>
<head>
<title> example of Layout3 </title>
</head>
<body>
<table width="500" border="0">
<tr>
<td colspan="3" style="background-color:#0099FF;text-align:center;">
<h1>Belal' design</h1></td>
</tr>
<tr>
<td colspan="3" style="background-color:#9999FF;">
Home
Books
Tutorials
About Us
Contact Us </td>
</tr>
<tr>
<td style="background-color:#00CCFF; width:100px"> left Side Bar </td>
<td style="background-color:#CCFFFF; width:300px;">
Title and Content. Title and Content. Title and Content. Title and Content. Title and
Content. Title and Content. Title and Content. Title and Content. Title and Content.
Title and Content. Title and Content. Title and Content. Title and Content. Title and
Content. </td>
<td style="background-color:#00CCFF;width:100px">Right Side Bar </td>
</tr>
<tr>
<td colspan="3" style="background-color:#CCCCFF;text-align:center;">
Copyright © creativedesignbest.blogspot.com</td></td>
</tr>
</table>
</body>
</html>
This will produce following result:
Belal' design
| ||
Home Books Tutorials About Us Contact Us
| ||
left Side Bar
|
Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content.
|
Right Side Bar
|
Copyright © creativedesignbest.blogspot.com
| ||
Table layout:5
<!DOCTYPE html>
<html>
<head>
<title> example of Layout4 </title>
</head>
<body>
<table width="500" border="0">
<tr>
<td colspan="3" style="background-color:#0099FF;text-align:center;">
<h1>Belal's design</h1></td>
</tr>
<tr>
<td colspan="3" style="background-color:#9999FF;">
Home
Books
Tutorials
About Us
Contact Us </td>
</tr>
<tr>
<td style="background-color:#00CCFF; width:100px"> \\\\\
<b><b>LINK</b><br />
Link1<br />
Link2<br />
Link3
</td>
<td style="background-color:#CCFFFF; width:300px;"> \\\\\
Title and Content. Title and Content. Title and Content. Title and Content. Title and
Content. Title and Content. Title and Content. Title and Content. Title and Content.
Title and Content. Title and Content. Title and Content. Title and Content. Title and
Content.
</td>
<td style="background-color:#00CCFF;width:100px">\\\\\
Adsence</b> <br />
Add1<br />
Add2<br />
Add3
</tr>
<tr>
<td colspan="3" style="background-color:#CCCCFF;text-align:center;">
Copyright © creativedesignbest.blogspot.com</td></td>
</tr>
</table>
</body>
</html>
This will produce following result:
Belal's design
| ||
Home Books Tutorials About Us Contact Us
| ||
\\\\\ LINK
Link1 Link2 Link3 |
\\\\\ Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content. Title and Content.
|
\\\\\ Adsence
Add1 Add2 Add3 |
Copyright © creativedesignbest.blogspot.com
| ||
Nasted table layout:
<!DOCTYPE html>
<html>
<head>
<title> example of Layout5 </title>
</head>
<body>
<table width="500" border="0">
<tr>
<td colspan="3" style="background-color:#0099FF;text-align:center;">
<h1>Belal's design</h1>
</td>
</tr>
<tr>
<td colspan="3" style="background-color:#9999FF;">
Home
Books
Tutorials
About Us
Contact Us </td>
</tr>
<tr>
<td style="background-color:#00CCFF;width:100px;text-align:top;">
<b>LINK</b><br />
Link1<br />
Link2<br />
Link3
</td>
<td style="background-color:#CCFFFF;width:300px;text-align:center ;">
Title, Title, Title,
<table border="1">
<tr>
<td style="width:150px;" >Sub Title1</td>
<td>
<p style="font-size: 10;">
<b>Sub Title2</b> <br />
content2 content2 content2 content2 content2
</p>
<p style="font-size: 10;">
<b>Sub Title3</b><br>
content3 content3 content3 content3 content3
</p>
</td>
</tr>
</table>
<td style="background-color:#00CCFF;width:100px;text-align:top;">
<b>Adsence</b><br />
Add1<br />
Add2<br />
Add3
</td>
</td>
</tr>
<tr>
<td colspan="3" style="background-color:#CCCCFF;text-align:center;">
Copyright © creativedesignbest.blogspot.com</td>
</tr>
</table>
</body>
</html>
This will produce following result:
Belal's design
| ||||
Home Books Tutorials About Us Contact Us
| ||||
LINK
Link1 Link2 Link3 |
Title, Title, Title,
|
Adsence
Add1 Add2 Add3 | ||
Copyright © creativedesignbest.blogspot.com
| ||||
HTML Layout - Useful Tips:
Tip: The biggest advantage of using CSS is that, if you place the CSS code in an external style sheet, your site becomes MUCH EASIER to maintain. You can change the layout of all your pages by editing one file. Tip: Because advanced layouts take time to create, a quicker option is to use a template. Search Google for free website templates (these are pre-built website layouts you can use and customize).
HTML Layout Tags:
HTML <div> Tag
Example
A section in a document that will be displayed in blue:
<div style="color:#0000FF">
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>
Definition and Usage
The <div> tag defines a division or a section in an HTML document.The <div> tag is used to group block-elements to format them with CSS.
Tips and Notes
Tip: The <div> element is very often used together with CSS, to layout a web page.Note: By default, browsers always place a line break before and after the <div> element. However, this can be changed with CSS.
HTML <span> Tag
Example
A <span> element used to color a part of a text:
<p>My mother has <span style="color:blue">blue</span> eyes.</p>
Definition and Usage
The <span> tag is used to group inline-elements in a document.The <span> tag provides no visual change by itself.
The <span> tag provides a way to add a hook to a part of a text or a part of a document.
No comments:
Post a Comment