HTML layout

CODECera

Text
Images
Places
ADS
KOLKATA
Kolkata is capital of West Bengal.Kolkata is the most populated city of Eastern India.
2016

HTML header

Header in HTML web page defines top most portion of the page.In the above example header is of green colour.

Designing HTML headers

<!DOCTYPE html>
<html>
<head>
<style>
div.header{
background-color:green;
text-align:center;
height:80px;
padding:5px;
}
</style>
<title>
HTML Headers
</title>
</head>
<body>
<div class="header">
<h1>CODECera</h1>
</div>
</body>
</html>

Output:

CODECera

Designing HTML aside elements

Right aside element

Adding right aside coding to the previous HTML documnet.
<!DOCTYPE html>
<html>
<head>
<style>
div.header{
background-color:green;
text-align:center;
height:80px;
padding:5px;
}
div#rightside{
background-color:lightgrey;
float:right;
height:300px;
text-decoration:none;
padding:5px;
width:90px;
}
</style>
<title>
HTML Aside
</title>
</head>
<body>
<div class="header">
<h1>CODECera</h1>
</div>
<div class="rightside">ADS</div>
</body>
</html>

Output:

CODECera

ADS

















Left aside element

Adding left aside element to the previous HTML document.
<!DOCTYPE html>
<html>
<head>
<style>
div.header{
background-color:green;
text-align:center;
height:80px;
padding:5px;
}
div#rightside{
background-color:lightgrey;
float:right;
height:300px;
text-decoration:none;
padding:5px;
width:90px;
}
div#leftside{
background-color:lightgrey;
float:right;
height:300px;
text-decoration:none;
padding:5px;
width:90px;
}
</style>
<title>
HTML Aside
</title>
</head>
<body>
<div class="header">
<h1>CODECera</h1>
</div>
<div class="rightside">ADS</div>
<div class="lefttside">Text<br>
Images<br>Places<br></div>
</body>
</html>

Output:

CODECera

ADS
Text
Images
Places

















Adding Sections in HTML

Adding section to the previous cooding.
<!DOCTYPE html>
<html>
<head>
<style>
div.header{
background-color:green;
text-align:center;
height:80px;
padding:5px;
}
div#rightside{
background-color:lightgrey;
float:right;
height:300px;
text-decoration:none;
padding:5px;
width:90px;
}
div#leftside{
background-color:lightgrey;
float:right;
height:300px;
text-decoration:none;
padding:5px;
width:90px;
}
div.section{
margin-left:91px;
margin-right:91px;
background-color: yellow;
text-align: left;
height:300px;
}

</style>
<title>
HTML Aside
</title>
</head>
<body>
<div class="header">
<h1>CODECera</h1>
</div>
<div class="rightside">ADS</div>
<div class="lefttside">Text<br>
Images<br>Places<br></div>
<div class="section">
<strong>KOLKATA</strong>
Kolkata is capital of West Bengal.Kolkata is the most populated city of Eastern India.
</div>
</body>
</html>

Output:

CODECera

ADS
Text
Images
Places
KOLKATA
Kolkata is capital of West Bengal.Kolkata is the most populated city of Eastern India.

Adding footers in HTML

Adding footer to the previous coding.
<!DOCTYPE html>
<html>
<head>
<style>
div.header{
background-color:green;
text-align:center;
height:80px;
padding:5px;
}
div#rightside{
background-color:lightgrey;
float:right;
height:300px;
text-decoration:none;
padding:5px;
width:90px;
}
div#leftside{
background-color:lightgrey;
float:right;
height:300px;
text-decoration:none;
padding:5px;
width:90px;
}
div.section{
margin-left:91px;
margin-right:91px;
background-color: yellow;
text-align: left;
height:300px;
}
div.footer{
background-color:green;
text-align:center;
height:30px;
}

</style>
<title>
HTML Aside
</title>
</head>
<body>
<div class="header">
<h1>CODECera</h1>
</div>
<div class="rightside">ADS</div>
<div class="lefttside">Text<br>
Images<br>Places<br></div>
<div class="section">
<strong>KOLKATA</strong>
Kolkata is capital of West Bengal.Kolkata is the most populated city of Eastern India.
</div>
<div class="footer">2016</div>
</body>
</html>

Output:

CODECera

ADS
Text
Images
Places
KOLKATA
Kolkata is capital of West Bengal.Kolkata is the most populated city of Eastern India.
2016