Tip:Before you are learn about I want to give a tip to you. You can download the free Text editors or HTML Editors softwares for extra features. I think HTML Editors is the best to use for your design. Because some HTMLEditers Softwares have a feature of Auto Syntax feature it will save your time to code. For that search on Google or Yahoo with following words.
We want Text Editors search as “Text Editors + Freeware”
IF we want the HTML Editors search as “HTML Editors + Freeware”
In above I used “freeware” it will results only freely use and download softwares on your search.
We can create the layout by use <div></div> tag and CSS style code is used in HTML document.Code:
<html> <head> <title>Creating layout in the webpage....</title> <style type="text/css"> .main{ background:#aabbaa; width:990px; height:100%; } .header{ width:980px; height:120px; background:#445566; margin-bottom:10px; } .content{ width:560px; background:#ffffff; margin-left:5px; margin-right:5px; float:left; } .lsb{ width:210px; background:#ffffff; float:left; } .rsb{ width:210px; background:#ffffff; float:right; } .foot{ width:980px; background:gray; margin-top:5px; } </style> </head> <body bgcolor="#aabbaa"> <div class="main">This the main layout or parent layout to the webpage.It is must and should otherwise the layout is not clear. <div class="header">This is the header section of the webpage. We Can insert title or title image. it's width is 980px, height is 120px, background color is drak green, bottom margin is 10px.</div> <div class="lsb">This is a left sidebar. It's width is 210px,floating is left, background color is "weight".,</div> <div class="content">It is a content section of the webpage. It's width is 560px, backgrouns color is "weight", floating left.</div> <div class="rsb">It is a right sidebar. It's width is 210px, background color is "weight", floating right</div> <div class="foot">It is a foot section of the webpage. It's width is 980px, background color is "gray" top-margin is 5px</div> </div> </body> </html>
If you con' t see the result copy and past the above code and save is as HTML document (layout.html).
