Home‎ > ‎ICT Programming‎ > ‎Assignments Fall 2012‎ > ‎

HTML - Page Layout

Web page layout is very important to make your website look good.

Design your webpage layout very carefully. Your layout should vary depending on the purpose of your page. A simple layout will be easier to navigate for most users. Clean, uncluttered designs and complementary colour schemes will be well received by any visitors to your page.

Website Layouts

Most websites have put their content in multiple columns (formatted like a magazine or newspaper).

Multiple columns are created by using <div> or <table> elements. CSS are used to position elements, or to create backgrounds or colourful look for the pages.

lampEven though it is possible to create nice layouts with HTML tables, tables were designed for presenting tabular data - NOT as a layout tool!

HTML Layouts - Using <div> Elements

The div element is a block level element used for grouping HTML elements.

The following example uses five div elements to create a multiple column layout, creating the same result as in the previous example:

<!DOCTYPE html>
<html>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com</div>

</div>

</body>
</html>

The HTML code above will produce the following result:

Main Title of Web Page

Menu
HTML
CSS
JavaScript
Content goes here

Copyright © W3Schools.com


HTML Layout Tags

TagDescription
<div>Defines a section in a document (block-level)
<span>Defines a section in a document (inline)




Comments