The HTML Files: A web site design and HTML tutorial brought to you by Didilogix.com.

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:

<HTML> This tag must be present at the very top of your page - it tells the browser that it is looking at an HTML page and needs to decode it accordingly. Missing this tag out will mean your page will not display!
<HEAD> the tag that tells the server that the text after it is information about the page type itself and not information that should actually be displayed in the web browser. An example is information on the language that your web page is using, and the tag described below:
<TITLE> this is the page title which should appear beneath the <HEAD> tag and the text that you type after it is what will be shown in the top bar of the browser window, is used by Search Engines to index your site and is also the text saved by default when a user bookmarks your page. This tag should have an end tag </TITLE> after the text you add for the title.
<BODY> this is the tag that tells the browser to display on the screen any text that appears after it. So the body tag is the start of your main html code for your content and for telling the browser how to show the content. I guess you could say that it is after this tag that all the fun starts!
Stuff: this is the actual stuff you want on the page which has to appear after the <BODY> tag.
</BODY> this is the tag you have to insert after you've finished with the stuff you actually want the web browser to display on the screen. It should be the second-to-last tag you write on the page.
</HTML> This tag has to appear as the very last tag at the bottom of the page immediately after the one above. It just tells the browser that there is nothing else for it to decode past that point, i.e. the end of the HTML document has been reached!

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 the <BODY> tag is how the browser knows to render the background black and the text white. The "bgcolor" and "text" are called attributes and the bits after the = and within quotes are called variables or arguments (you will see both in various texts but they mean the same thing!). Variables / arguments always follow an = sign and go within " quotes. Attributes and Variables are what make HTML tags add interest to a page. In the example here, this is what they do:

The attribute "bgcolor" is - you guessed it - the attribute that controls page background colour and in this case its variable is #000000 - the code for the colour "black".
The attribute "text" is the attribute that controls text colour and in this case its variable is #ffffff - the code for the colour "white".

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. <BODY bgcolor="black"> - you do need to be able to use hex codes if you want more unusual colours on your web page such as colours that exactly match a particular colour in your logo or graphic so that all the colours compliment one another - this is an important design fundamental - you do want coordinating colours, just don't go too mad and have too many of them otherwise you will blat the reader's mind and make them "run away"! Anyway, this is why I am introducing the colour code concept at this point - so you can tweak the codes to get any colour your heart desires!

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 <BODY> of your HTML files?

Didi Barnes is a member of:

The International Webmasters Association

© 1998-2008 Didi Barnes - All Rights Reserved.
No part of this HTML tutorial may be reproduced, stored in a retrieval system, or transmitted,
in any form or by any means, electronic, mechanical, photocopying, recording, or otherwise,
without the prior permission of the copyright owner who may be contacted using the link above.