Using HTML5 and CSS to Create a Website

Web Page Layout #1
Tutorial on How to Design a Web Page

Note: This web page teaches an outdated method of structuring web pages.

You can design a web page using the code at the bottom of this page. You can also use the code from the example web page.

Layout #1

Layout #1 The actual structure of the page is shown in the diagram to the right. It is made up of 2 single row tables.

The example web page will demonstrate how to add borders, links and images. You can get the code from the example by Right clicking on the page and choosing View source (IE) and View Page Source (Mozilla).
Example Web Page

Table 1
left cell heading and navigational devices
right cell document body
Table 2
contains footer

Copy the code and save it in NotePad with a .html extension or if using an HTML editor paste it into a blank page.

Add your logo and links to the left column of table 1.

Add your body text to the right column.

Place your footer information in table 2.


To copy the code, just drag your mouse over it while holding down the left mouse button. Right click on the highlighted text and choose copy.

Open NotePad and right click inside the editor window. Choose Paste.
<html>
<head>
<title>Page title</title>
<!--Embedded Style Sheet-->
<style type="text/css">
h1 {font-family:arial; font-size:16pt;text-align:center}
p {font-family:arial; font-size:12pt;text-align:left}
</style>
</head>
<body>
<!--Table 1 - 2 Columns-->
<table width="100%" cellpadding="0" cellspacing="0">
<tr align="center" valign="top">
<!--Table 1 - Left Column-->
<td align="left" colspan="1" rowspan="1">LEFT COLUMN - LOGO and LINKS or BUTTONS</td>
<!--Table 1 - Right Column-->
<td align="left" colspan="1" rowspan="1">RIGHT COLUMN - BODY TEXT</td>
</tr></table>
<!--Table 2 - Footer-->
<table width="100%" cellpadding="0" cellspacing="0">
<tr align="center" valign="top">
<td align="center" colspan="1" rowspan="1">FOOTER - COPYRIGHT and COMPANY INFO</td>
</tr></table>
</body>
</html>

You can get your logo made free at our Web Graphics Gallery.

Get your navigational buttons at our Button Gallery or go to Creating Buttons With CSS