एक Website मे Layouts बनाना विभिन्न Elements की स्थिति की गतिविधि है जो एक अच्छी तरह से Structured तरीके से एक Webpage बनाते है और Website को Attractive रूप देते है.
आप देख सकते है Internet पर अधिकांश Websites ने अपने Content को Multiple Rows और Columns मे रख दिया है.
एक Magazine या Newspaper की तरह Formatted सामान्य Web Users को बेहतर Reading और Writing Environment देने के लिये HTML Layouts का उपयोग करते है.
HTML मे Website को बेहतर दिखने के लिए Layouts बहुत महत्वपूर्ण होता है. Layouts से Website को बनाने के लिए काफी समय लगता है. लेकिन इससे आपकी Website बहुत अच्छी दिखती है.
HTML में Website को बनाने के लिए सबसे सरल और लोकप्रिय Layouts <table> <div> Tag होते है.
HTML Table मे Layout को बनाने के लिए सबसे आसान तरीका है कि Table की Rows और Columns और उनके Attribute जैसे Colspan और Rowspan के उचित उपयोग के साथ हम अच्छे Layout प्राप्त कर सकते है.
नीचे आप देख सकते है की HTML Layout मे हमने यहाँ 3 Rows और 2 Columns वाले Tables का उपयोग करके Layout को प्राप्त किया है. Header और Footer Column Full Spans और Colspan Attribute का उपयोग करके फैला हुआ है.
<!DOCTYPE html>
<html>
<head>
<title>HTML Layout Table</title>
</head>
<body>
<table width="100%" border="0">
<tr>
<td colspan="2" bgcolor="red">
<h1 style="text-align:center;">This is Web Page</h1>
</td>
</tr>
<tr valign="top">
<td bgcolor="blue" width="70">
<b>Main Menu</b><br />
HTML<br />
HTML5<br />
CSS<br />
PHP...
</td>
<td bgcolor="Orange" width="100" height="250">
Web Development Tutorials
</td>
</tr>
<tr>
<td colspan="2" height="50" bgcolor="Cyan">
<center>
Copyright © Tutorialsroot.com 2017. All Rights Reserved
</center>
</td>
</tr>
</table>
</body>
</html>
CSS की सहायता से हम DIV और SPAN जैसे Block Elements का उपयोग करके एक Layout को प्राप्त कर सकते है.
<!DOCTYPE html>
<html>
<head>
<title>HTML Layout with DIV, SPAN and CSS</title>
</head>
<body>
<div style="width:100%">
<div style="background-color:#F52807">
Tutorialsroot Header
</div>
<div style="background-color:#B8FF33;height:200px;
width:30%;float:left;">
Left menu
</div>
<div style="background-color:#33FF77;height:200px;
width:70%;float:right;">
Main body
</div>
<div style="background-color:#F52807;clear:both">
Tutorialsroot Footer
</div>
</div>
</body>
</html>