Web Page Layout #5
Tutorial on How to Design a Web Template
These web templates are more for educational purposes than actual use.
You can download them and study the style sheet and simple HTML5 code. Some use new tags introduced in HTML5. All of them present some of the easy to add features of CSS3 for jazzing up your web pages.
Our first layout pictured on the right consists of 4 divisions arranged as shown.
The template is shown below and the HTML5 code used to build its structure is shown beside it.
Preview The Template
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="cap"></div>
<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</body>
</html>
You can download the web page code , style sheet and images in a zip file for further study.
Download Layout5.zip
Also see: Creating Web Page Headers
More Information
Use these lessons in our HTML5 tutorial to get a better understanding of building web pages with divisions and CSS.
The Division Tag
Float Property