Basic Web Design Tutorial Part 9

Putting it all together, content and layout

Example 10 (opens in a new browser window) puts everything you’ve learnt so far into pratice. The page is layed out in a table. It has headers, an image and links. Next we’ll make it look more stylish by adding a cascading stylesheet (CSS) to change the fonts, background colours, text colours and layout. There’s also an HTML comment or two. It’s good practice to comment your code if there’s anything you think you might forget when you go back to edit it later.
<html>

<head>
<title>
It's starting to look like a website
</title>
</head>
<body>
<table border="1">
<tr>
<td>
<img src="images/www.png" />
</td>
<td>
<h1>Is it a website yet?</h1>
</td>
</tr>
<tr>
<td>
Links:
<br />
<a href="example1.html">Example 1</a>
<br />
<a href="example2.html">Example 2</a>
<br />
<a href="example3.html">Example 3</a>
<br />
<a href="example4.html">Example 4</a>
<br />
<a href="example5.html">Example 5</a>
<br />
<a href="example6.html">Example 6</a>
<br />
<a href="example7.html">Example 7</a>
<br />
<a href="example8.html">Example 8</a>
<br />
<a href="example9.html">Example 9</a>
<br />
<a href="example10.html">Example 10</a>
<br />
<a href="example11.html">Example 11</a>
<br />
<a href="example12.html">Example 12</a>
<br />
<a href="example13.html">Example 13</a>
<br />
<a href="example14.html">Example 14</a>
<br />
<a href="finished.html">The Finished Page</a>
</td>
<td>
<p>
This is my final HTML example. It looks awful but that's
not the point. The content is here and the basic layout
is in place. If you can understand this then you're pretty
much there with HTML.
</p>

<p>
This gives you all the layout you need to make a fully
formed page. Then all you need is to make it pretty
with CSS.
</p>

<p>
We'll add a lot of colour, a nicer font, position text
inside the TD tags, position and size the whole page
and change the look of our links.
But for now congratulate yourself on learning the
basics of HTML.
</p>
</td>
</tr>

<tr>
<td>
<!-- this is an HTML comment just to let you know
that this TD tag is supposed to be empty -->
</td>

<td>
This is the footer and a lot more information could
go here.
</td>
</tr>

</table>
</body>
</html>
Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Leave a Comment