HTML Layouts
The layout is very important to give better look to your website. Now days all modern websites are using CSS and Javascript framework.We can make dynamic and responsive layout.But we can create a good layout using simple HTML tables or division tags in combination with other formatting tags.HTML5 offers new semantic elements that define different parts of a web page.Using these sematic elements we can create good layouts.
HTML Layout Using Tables
The simplest and most popular way of creating layouts is using HTML <table> tag. These tables are arranged in columns and rows.Useing table tags we can create good layout .
<!DOCTYPE html>
<html>
<head>
<title>Table layout</title>
</head>
<body>
<table border="3" width="100%" height="100%">
<tr>
<td colspan="3">
<h1> Main title</h1>
</td>
</tr>
<tr align="top">
<td width="50">
<b>Main Menu</b><br />
HTML<br />
CSS<br />
Javascript
</td>
<td width="40" height="200">
Description
</td>
<td bgcolor width="40" height="200">
Advertisement
</td>
</tr>
<tr>
<td colspan="3">
<center>
footer
</center>
</td>
</tr>
</table>
</body>
</html>
Table layout
Main title
Main Menu
HTML
CSS
Javascript
Description
Advertisement
footer
HTML Layout Using <div> tagThe <div> element is often used as a layout tool, because it can easily be positioned with CSS.
<!DOCTYPE html>
<html>
<head>
<title>HTML Layout using DIV</title>
</head>
<body>
<div style="width:100%">
<div style="background-color:#006400; width:100%">
<h1> Main title</h1>
</div>
<div style="background-color:#2F4F4F; height:200px;width:100px;float:left;">
<div><b>Main Menu</b></div>
HTML<br />
CSS<br />
Javascript </div>
<div style="background-color:#556B2F; height:200px;width:350px;float:left;">
<p>Description</p>
</div>
<div style="background-color:#DAA520; height:200px;width:100px;float:right;">
<div><b>Advertisement</b></div>
</div>
<div style="background-color:#FFE4E1;clear:both">
<center>
footer </center>
</div>
</div>
</body>
</html>
<html>
<head>
<title>HTML Layout using DIV</title>
</head>
<body>
<div style="width:100%">
<div style="background-color:#006400; width:100%">
<h1> Main title</h1>
</div>
<div style="background-color:#2F4F4F; height:200px;width:100px;float:left;">
<div><b>Main Menu</b></div>
HTML<br />
CSS<br />
Javascript </div>
<div style="background-color:#556B2F; height:200px;width:350px;float:left;">
<p>Description</p>
</div>
<div style="background-color:#DAA520; height:200px;width:100px;float:right;">
<div><b>Advertisement</b></div>
</div>
<div style="background-color:#FFE4E1;clear:both">
<center>
footer </center>
</div>
</div>
</body>
</html>
HTML Layout using DIV
Main title
Main Menu
HTML
CSS
Javascript
Description
Advertisement
footer
Layout using HTML5
HTML5 offers new semantic elements that define different parts of a web page.These new elements helps to create good layout .It overcomes the difficulties of older methods.There are new elements in HTML5 <header>,<nav>,<section>,<article>,<aside>,<footer>.
0 Comment "HTML Layouts"
Post a Comment