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:
Leave a Comment