OK, notice on the left hand side that the links have changed in style. The underline has gone but if you roll the mouse over them it reapppears.
So, what’s new? Firstly the page has been centered by including this code in the CSS BODY section:
This makes the whole page 800 pixels wide and centers it in the browser window.
I’m not going to show the complete source code any more just the changes.
I’ve added a line to the HEAD dection of the HTML file to tell the browser to request a CSS (cascading stylesheet) called “example11.css” (in the same directory as the webpage) and apply it’s effects to the browser. In example 11 it looks like this:
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.
This is a more complex table example. Complex layouts (with headers, footers, columns) might need this.
The COLSPAN and ROWSPAN attributes of the TD tag tell the browser that that TD stretches over multiple rows or columns. I find it helps to imagine the table being built up a row at a time from top to bottom and from left to right. The best way to get your head around this is to play around with it.
Tables let us lay out information so it looks nice and can be used to lay out your whole webpage. Some would argue that all the positioning should be done with a CSS stylesheet but I’ve found that it’s hard to get working on all browsers (IE6 is particularly foobar). So I still use tables. They’ve been around for ages and all browsers seem to know what to do with them. Here’s a simple table with 2 rows.
The IMG tag allows us to include an image. In this example the image is in a sub-directory called “images” under the directory the web page is in. This is an empty tag, meaning that it does not have separate start and end tags. The SRC gives the image filename, in this case in a subdirectory called “images”. The ALT tag gives a description of the image and will be displayed as an alternative if the image fails to load for some reason. It is also useful for giving information to google image search and for text-only or speech-based browsers.