Free Web Development Online Tutorials, Learn to Code
HTML Layout Design Tutorial, Webpage Designing using HTML, HTML Tutorial for Beginners

HTML Layout Design Tutorial

In this tutorial you will learn how to simple basic web page layout using some div tags, once you learn this simple use of div tags, slowly you will be able to design any web page using different HTML tags and CSS Style.

Design HTML Layout Step by Step

Layout HTML is basically combination of DIV, Span, Tables with CSS Style

If you are designing html layout for the first time then you may find using html table is the easy option, but for better rendering and performance using div and span is always recommended

Sample HTML Layout

Note here we have used few div tags with different height and color properties

Header
Left Navgation
<h1>Header 1</h1>
Content Goes Here <h2>Header 2</h2>
Footer

In above layout we have used div and in-line css, so that you can make changes easily and practice, but in real time you should avoid using inline css, rather create a css class and then call by name

Header DIV tag code, You can add business punch line, logo, quick navigation links inside this DIV

<div style="padding:15px;font-size:15px;text-align:center;border-bottom:solid 1px #cbc8c8;background-color:#0c79ff">
Header 
</div>   

Left Navgation DIV tag code, If you want to keep left navigation, use this div, you also can remove this completely

<div style="float:left;width:20%;min-height:300px;font-size:15px;text-align:center;padding:10px;background-color:#0c79ff"> 
Left Navgation
</div> 

Middle Container DIV tag code with some content inside.

<div style="float:right;width:76%;min-height:300px;font-size:15px;text-align:center;">
<h1>Header 1</h1>
Content Goes Here
<h2>Header 2</h2>
</div> 

Write the following div to clear off all floating effect of earlier div, remember whenever you use any “float” attribute in div, then after that you must use “clear” attribute

<div style="clear:both;"></div>

Footer Navgation DIV tag code

<div style="padding:15px;font-size:15px;text-align:center;border-top:solid 1px #cbc8c8;background-color:#0c79ff">Footer</div> 

Here are the all code together to create the page layout

<div style="padding:15px;font-size:15px;text-align:center;border-bottom:solid 1px #cbc8c8;background-color:#0c79ff">
Header</div>
<div style="float:left;width:20%;min-height:300px;font-size:15px;text-align:center;padding:10px;background-color:#0c79ff"> Left Navgation
</div> <div style="float:right;width:76%;min-height:300px;font-size:15px;text-align:center;"> 
<h1>Header 1</h1> Content Goes Here
<h2>Header 2</h2> </div> <div style="clear:both;"></div> <div style="padding:15px;font-size:15px;text-align:center;border-top:solid 1px #cbc8c8;background-color:#0c79ff">Footer </div>

Remember all above tags should go inside the BODY tag


You may also read
Work from Home like a Professional
work from home
What is Page Authority in SEO! How does it work?
Page Authority in SEO
Check if webpage is mobile friendly
Mobile friendly website check