web training room for online courses
Online Training for Asp.net MVC Web Designing Development, MS SQL, Digital Marketing

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

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

Here is the code
<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>

 
HTML Tutorial
How to Design Layout in HTML, HTML Tutorial


Consulting