Using HTML5 and CSS to Create a Website

Web Page Layout #2

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

You can create a website template using the code at the bottom of this page. You can also use the code from the example web page which demonstrates how to add borders, background colors, links and images.

Layout #2

Web Design Layout 2This web page consists of 4 single row tables. The structure is shown in the diagram to the right.
To get the code from the example page, right click on the page, then choose View Source (IE) or View Page Source (Mozilla).
Example Web Page: Layout #2

Table 1
Left Cell company Logo
Right Cell Slogan
Table 2
1 cell for navigation
Table 3
Left cell - Body Text
Right Cell - image
Table 4
1 cell - footer

Copy the code and save it.

Place contents in cells and tables using the list shown above.

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. If using an HTML editor, paste into a blank page.


<html>
<head>
<title>Page title</title>
<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-->
<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</td>
<!--TABLE 1- RIGHT COLUMN-->
<td align="left" colspan="1" rowspan="1">RIGHT COLUMN - SLOGAN</td>
</tr></table>
<!--TABLE 2 SINGLE COLUMN-->
<table width="100%" cellpadding="0" cellspacing="0">
<tr align="center" valign="top">
<td align="center" colspan="1" rowspan="1">HORIZONTAL NAVIGATION - LINKS or BUTTONS</td>
</tr></table>
<!--TABLE 3-->
<table width="100%" cellpadding="0" cellspacing="0">
<tr align="center" valign="top">
<!--TABLE 3 - LEFT COLUMN-->
<td align="left" colspan="1" rowspan="1">LEFT COLUMN - BODY TEXT</td>
<!--TABLE 3 - RIGHT COLUMN-->
<td align="left" colspan="1" rowspan="1">RIGHT COLUMN - IMAGE</td>
</tr></table>
<!--TABLE 4 SINGLE COLUMN-->
<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