Web Page Layout #6
Tutorial on How to Design a Web Template
These templates are more for educational purposes than actual use.
The HTML5 code used to develop the structure will vary in each template. Some will use new elements introduced in HTML5.
All use CSS3 in different ways to enhance the appearance of the HTML code.
Layout #6 uses 4 main divisions.
The first division (header element) is divided into 2 columns to make the heading.
The second is a single column division (nav element) and is used for our links.
The third division is divided into 2 columns and forms our body content. The columns are created using nested divisions.
The fourth is a single column division (footer element) and is used for our footer.
HTML5 code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
<div id="left"></div>
<div id="right"></div>
</header>
<nav>
</nav>
<div id="main">
<div id="main-left"></div>
<div id="main-right"></div>
</div>
<footer></footer>
</body>
</html>
You can download the web page code , style sheet and images in a zip file for further study.
Download Layout6.zip
More Information
Use these lessons in our HTML tutorial to get a better understanding of building web pages with division tags and CSS.
Division Tag
ID Attribute
Class Attribute
Header Element
Nav Element