2.1 Page Layout
All web pages have the following basic structure and the tags below are shown in the order in which they must appear in your code:
Now lets have a go at building a basic web page...
Firstly, you'll need to open your text editor. In Windows, you can go "start", "programs", "Accessories" and click on "Notepad" which is the default text editor. However, I prefer to use a tool called "NoteTabPro" which you can get from here - a fabulous text editor which even has html tags built-in, so you can just click on the one you want!
With your text editor open, type the following:
Note that all the tags that I introduced at the beginning of this page are in the example screenshot above, and what you should have in your own file!
Once you have done this, you'll need to save the file before it can be displayed in your web browser. It must be saved with the file extension ".htm" and you should call it "index.htm". This takes a little tweaking because your text editor will try and save it with the extention ".txt" unless you use the "File", and "save as" method. Now open your web browser, select "File", "Open File" and browse to where you saved that file, select it and click "Open". If you've done all these steps right you should see:
Cool, your very first web page!
Why is the page black with white text?
Have a look back at your code page - or the screenshot of it earlier above. The stuff within
What about all this #000000 and #ffffff business? Well, they are examples of
hexadecimal (hex) colour codes which is how a browser understands colours. Whilst most browsers do in fact
kindly recognise the text for basic colours such as red, green, blue - e.g.
Have a look at Appendix 1: Colour Codes and you'll see a list of hex codes for various colours. If none of these take your fancy and you want something that matches one of the colours in a graphic or logo, say, then just open that graphic in an image editor like Photoshop, use the palette eyedropper tool and you will be told the RGB colour of that area of your graphic. All you then do is convert that RGB code to hex. These days, tools like Photoshop usually have settings in the palette display area that can be set to tell you the HTML hex colour code as well. If they don't, you can easily convert to the hex value - just type "rgb to hex converter" in Google and you'll get many places that you can do this on-line. If you want to know more about all this hex stuff because you are nuts like me and actually enjoy maths, or simply because you want to know how to manually convert the RGB to hex and vice versa yourself (important graphic design skill, that is!), then the Appendix 1: Colour Codes page will tell you all you need to know!
Warning: Do be careful with any attribute that is to do with colour. If you are a US reader, this won't affect you, but if you are in the UK it will. Why? Because in the UK we spell the word colour as "colour" but the code has to be written without the "u" as "color"! You wouldn't believe how annoying this is in the UK when typing out HTML because it is just our instinct to spell it the UK way - and then of course the code doesn't work!
NEXT: So what can you do in the