Using HTML5 and CSS to Create a Website

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.

Layout #1Our 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.


Layout 5

Preview The Template

<!DOCTYPE html>
<div class="cap"></div>
<div class="main">
<div class="left"></div>
<div class="right"></div>
<div class="footer"></div>


You can download the web page code , style sheet and images in a zip file for further study.

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