Free Simple HTML Tutorial

HTML Page Structure

Here is the structure of a basic html page. Anywhere you see a box (like the one below) you can cut and paste from it which you may find handy! Try changing the contents between the title tags, and the text in between the body tags then press the button. To return here just press the back button on your browser.

Great. Hey do you realise something? You just hand coded your first HTML page! That was easy wasnt it? 30 seconds into the tutorial and you have done something useful! Hopefully you noticed that whatever text you put in between the title tags appeared at the top of your browser window.

So the basic page structure is:

<html> - tells the browser that this page is indeed html code
</html> - tells the browser this is where html ends and the great unknown begins....
<head> - marks the beginning of the header where the title and perhaps other things may be found.
</head> - marks the end of the header
<body> - marks the start of the visible content of the page
</body> - marks the end of the visible content of the page
<title></title> - enclose the most important piece of text on the page, its title.
<style></style> - enclose the inline CSS styles that determine how your page looks.

The title is very important, although humans will often ignore that little bit of text on top of their browser window search engines never will. Your title should be relevant and also unique for each page on your site, duplicate it and Google for one will assume each page is the same and not list them!

The style tag can control many things such as the background color of the page, the color and font of your text and the appearance of links when visited, hovered over with the mouse etc. Throughout this site I am going to use simple inline CSS styles. Below is an example you can play with, you wont know about all the tags at the moment, just play with the style statements, you cannot break anything:

Next: Text Appearance

Tutorial Contents

Items marked with an asterisk (*) are optional

HTML Tutorial Keyword Density Tool Referrers

bookmark hit - internal hit - ... - www.linkhello.com - ... - www.folkd.com - ... - ... - www.rstm.edu - www.gather.com - ... - 83.169.21.186 - 222.165.133.50 - www.google.co.uk - ... - xinba8.info - carbonxnation.info - www.larryto.net - www.rogerstern.com - ... - www.wiibuy.biz - www.perfumefor.net - www.health-4.com - www.baby-store-1.com - ... - ... - ... - ... - ... - ... - www.hgt435lop345.com - www.google.it - www.google.com -

This list of people who link to this Tutorial page is automagically maintained. Link to us, send traffic, and get listed. Simple.