Lesson 13
Now that you have worked through each of the exercises, we will build our first simple web page. We will create the layout using tables for simplicity.
The main areas of your web page will be:
- Header – For website logo/banner
- Menu – For navigation
- Content – Area for all your content
- Footer – Used copyright and terms etc.
We will now create our layout using a table.
- Open ‘Notepad++’ from your desktop
- Add the following code to your page:
<!doctype html>
<html>
<head>
<title>Lesson 10</title>
<link href="style.css" rel="stylesheet" type="text/css">
<body>
<table width="500">
<tr>
</tr>
<td height="100" > banner</td>
<tr>
<td width="50" >menu</td>
<td width="100" height="300">content</td>
</tr>
<tr >
<td>footer</td>
</tr>
</table>
</body>
</html>
- Save your file and from the ‘Run’ menu choose ‘Launch in IE’. You should now see this:
While we can see the layout its not very clear. We will now add some colour to differentiate the sections.
- Now change your code adding some background colour:
<!doctype html>
<html>
<head>
<title>Lesson 10</title>
<body>
<table width="500">
<tr></tr>
<td height="100" colspan="2" style="background-color:orange"> banner</td>
<tr>
<td width="50" style="background-color:green">menu</td>
<td width="100" height="300" style="background-color:cyan">content</td>
</tr>
<tr>
<td colspan="2" style="background-color:blue">footer</td>
</tr>
</table>
</body>
</html>
- Save your file and from the ‘Run’ menu choose ‘Launch in IE’. You should now see this:
Now we can see a clear structure to our page. We can centre our layout by using the <center> tags.
- Add a <center> tag just after the <body> tag.
- Close the tag by placing a </center> tag just before the closing </body> tag.
Your code should look like this:
<!doctype html>
<html>
<head>
<title>Lesson 10</title>
<body>
<center>
<table width="500">
<tr></tr>
<td height="100" colspan="2" style="background-color:orange"> banner</td>
<tr>
<td width="50" style="background-color:green">menu</td>
<td width="100" height="300" style="background-color:cyan">content</td>
</tr>
<tr >
<td colspan="2" style="background-color:blue">footer</td>
</tr>
</table>
</center>
</body>
</html>
- Save your file and from the ‘Run’ menu choose ‘Launch in IE’. You should now see this:
You have built your first elementary page.
Please note, while we have demonstrated how to build your layout using tables. This method is considered outdated and could cause problems for those using screen readers. Ideally, you would use CSS to create your designs, but this is outside of the scope of this tutorial.
