CodesJava

Easy learning with example program codes

HTML Layout Techniques

For creating a well-arranged and an easy to understand website, creating a website layout is important. To create multi-column layouts, the following methods can be utilised:

  • HTML tables
  • CSS float property
  • CSS framework
  • CSS flexbox
  • Layout using div

HTML Tables:

The easiest way of creating a layout of a website is the HTML table-based layout method. Tables utilizes rows and column-based format and is thus best to display tabular data. But it is not recommended for web page layout as website modification and redesigning is a complicated task with the HTML table-based layout method.

Example:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
li{  
display: inline-block;  
padding: 10px;}  
a{  
color:white;  
}  
</style>  
</head>  
<body>  
<!-- Header Section -->  
<table width="100%" style="border-collapse:collapse;">  
<tr>  
<td colspan="2" style="background-color:crimson; text-align: center;"> 
<h3 style="font-size: 30px; color: white;">LAYOUT EXAMPLE</h3>  
</td>  
</tr>  
<!-- Nav Section -->  
<tr>  
<td colspan="2" style="background-color:gray;">  
<ul>  
<li><a href="#">Home</a></li>  
<li><a href="#">Services</a></li>  
<li><a href="#">About Us</a></li>  
<li><a href="#">Contact Us</a></li>  
</ul>  
</td>  
</tr>  
<!-- Main Section -->  
<tr>  
<td style="background-color:pink; width:50%; height: 200px; text-align: center;">  
<h2>HELLO WORLD!!</h2>  
</td>  
<td style="background-color:white; height: 200px;text-align: center;">
<h3>How are you today?</h3>  
</td>  
</tr>  
<!-- Footer Section -->  
<tr>  
<td colspan="2" style="background-color:crimson; text-align: center;"> 
<p style="color:white">©<strong>Copyright W3spoint.com</strong></p>  
</td>  
</tr>  
</table>  
</body>  
</html>

Output:

Explanation:

In the above example, we created a website layout using the HTML table-based layout method, however it is not a recommended method.

CSS Frameworks:

CSS frameworks like W3.CSS and Bootstrap can be used to create a website layout in a fast way. It is easy to create a responsive and attractive web layout using this method.

CSS Float:

It is very easy to learn and use the CSS float property method to create an entire web layout, however, flexibility can be harmed since the floating elements are tied to the document flow.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}
header {
  background-color: crimson;
  padding: 10px;
  text-align: center;
  font-size: 30px;
  color: white;
}
nav {
  float: left;
  width: 50%;
  height: 200px;
  background: pink;
  padding: 30px;
}
nav ul {
  list-style-type: none;
  padding: 0;
}
article {
  float: left;
  padding: 30px;
  width: 50%;
  background-color: white;
  height: 200px;
}
/* Clear floats after the columns */
section:after {
  content: "";
  display: table;
  clear: both;
}
footer {
  background-color: crimson;
  padding: 10px;
  text-align: center;
  color: white;
}
/* Responsive layout */
@media (max-width: 600px) {
  nav, article {
    width: 100%;
    height: auto;
  }
}
</style>
</head>
<body>
<header>
<h3>LAYOUT EXAMPLE</h3>
</header>
<section>
<nav>
<ul>  
<li><a href="#">Home</a></li>  
<li><a href="#">Services</a></li>  
<li><a href="#">About Us</a></li>  
<li><a href="#">Contact Us</a></li>  
</ul> 
</nav>
<article>
<h1>HELLO WORLD!!</h1>
<p>How are you today?</p>
</article>
</section>
<footer>
<p>©<strong>Copyright W3spoint.com</strong></p>
</footer>
</body>
</html>

Output:

Explanation:

In the above example, we created a website layout using the CSS Float property method.

CSS Flexbox:

A new layout mode was introduced in CSS3 to ensure that the page layout can accommodate various screen sizes along with various display devices. This layout mode was called CSS Flexbox. However, it is not suitable for IE10 and its earlier versions.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}
header {
  background-color: crimson;
  padding: 10px;
  text-align: center;
  font-size: 30px;
  color: white;
}
/* Container for flexboxes */
section {
  display: -webkit-flex;
  display: flex;
}
nav {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: pink;
  padding: 30px;
}
nav ul {
  list-style-type: none;
  padding: 0;
}
article {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  background-color: white;
  padding: 30px;
}
footer {
  background-color: crimson;
  padding: 10px;
  text-align: center;
  color: white;
}
/* Responsive layout */
@media (max-width: 600px) {
  section {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}
</style>
</head>
<body>
<header>
<h3>LAYOUT EXAMPLE</h3>
</header>
<section>
<nav>
<ul>  
<li><a href="#">Home</a></li>  
<li><a href="#">Services</a></li>  
<li><a href="#">About Us</a></li>  
<li><a href="#">Contact Us</a></li>  
</ul> 
</nav>
<article>
<h1>HELLO WORLD!!</h1>
<p>How are you today?</p>
</article>
</section>
<footer>
<p>©<strong>Copyright W3spoint.com</strong></p>
</footer>
</body>
</html>

Output:

Explanation:

In the above example, we created a website layout using the CSS Flexbox property method.

Layout using Div:

Example:

<!DOCTYPE html>  
<html>  
<head>  
<title>Example</title>  
<style>  
.header{  
padding: 20px;  
background-color:crimson;  
text-align: center;  
}  
.header h3{  
color:white; 
font-size: 20px;
}    
.nav{  
background-color:gray;  
padding: 5px;  
}  
.nav li{  
list-style: none;  
display: inline-block;  
padding: 8px;  
}  
.nav a{  
color: white;  
}             
.nav ul li a:hover{  
text-decoration: none;  
color: blue;  
}  
.lside{
float: left;  
width: 50%;  
min-height: 200px;  
background-color: pink;  
text-align: center;  
}  
.rside  
{  
text-align: center;  
float: right;  
width: 50%;  
min-height: 200px;  
background-color:  white;  
}  
.footer{  
background-color:#455e64;   
text-align: center;   
padding: 10px;
}  
.footer p{  
color: white;
}  
</style>  
</head>  
<body>  
<div>  
<div class="header">  
<h3>LAYOUT EXAMPLE</h3>  
</div>  
<!-- Nav -->  
<div class="nav">  
<ul>  
<li><a href="#">Home</a></li>  
<li><a href="#">Services</a></li>  
<li><a href="#">About Us</a></li>  
<li><a href="#">Contact Us</a></li>   
<li style="float: right;"><a href="#">SIGN-IN</a></li>  
<li style="float: right;"><a href="#">SIGN-UP</a></li>  
</ul>  
</div>  
<!-- main -->  
<div style="height:200px">  
<div class="lside">     
<h2>HELLO WORLD!!</h2>    
</div>  
<!-- side -->  
<div class="rside">  
<h3>How are you today?</h3>   
</div>  
</div>  
<!-- footer -->  
<div class="footer">  
<p><strong>©Copyright W3spoint.com</strong></p>  
</div>      
</div>  
</body>  
</html>

Output:

Explanation:

In the above example, we created a website layout using the Div method.

Please follow and like us:
error
Posted in HTML   









Copyright © 2019 CodesJava DMCA.com Protection Status