HTML
Layout
Webpage layout is the part of designing that deals with the arrangement of visual elements on a page. Page layout is used to make the web pages look better. It establishes the overall appearance to achieve a smooth flow of information and eye movement for maximum effectiveness or impact.
Now-a-days, all modern websites are using CSS and JavaScript based framework to come up with responsive and dynamic websites but it can be created using HTML <table> tag. These tables are arranged in columns and rows, so you can utilize these rows and columns in whatever way you like.
Layout Example
Most modern websites and blogs consist of a header, footer, navbar, perhaps another sidebar, and the main content area. Something like this:
Above layout can be marked up as follows:
<header>Header</header>
<aside>Sidebar</aside>
<div>Content</div>
<footer>Footer</footer>
Example with Code
<!doctype html>
<html>
<head>
<style>
body{
font-family: Segoe UI;
}
section {
width: 80%;
margin: auto;
}
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
aside {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:173px;
float:left;
padding:5px;
}
li{
list-style: none;
}
.content {
width:350px;
float:left;
padding: 0 0 0 30px;
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<section>
<header>
<h1>Header</h1>
</header>
<aside>
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 2</li>
</ul>
</aside>
<div class="content">
<h1>PHPDocs</h1>
<p>PHPDocs is an online learning platform. Learn the programming skills you need for the job you want.</p>
</div>
<footer>
Copyright @phpdocs.com
</footer>
</section>
</body>
</html>