Lesson One

To see the HTML code behind this page, click on "view" up at the top if it's there - Google's Chrome browser lacks it, so you'll have to look for a spanner symbol under the cross in the top right corner, then look for a rectangle with a corner folded over next to the spanner - click on that. Now click on "source" or "page source" if you can see either of those, but with Chrome and the latest version of Opera you'll have to click on "developer tools" before "source" becomes visible). Once you've managed that, you'll then be taken into a text editor or viewer which allows you to see the entire document. The browser only shows the parts of the page that the page writer wants people to see when they visit a site, but when you look at the source code you can see how the page was actually put together. Don't try to read all this text in the source code though: it gets messy in places because of the coding needed in it to show what tags look like without them turning into active tags.

The words between the less-than and greater-than signs are called "tags", and they usually come in pairs. The first tag in this document tells the browser to read whatever follows it as HTML, and the last tag has a "/" in front of html to say that the HTML part of the document has ended. Most simple Web pages begin with an <html> tag and end with a </html> tag.

The next pair of tags to look for are the <head> and </head> ones: between these tags is an area used for various things which don't appear in the main document, such as the title of the page (the title that appears in the top information bar of the browser). If a page needs to use a JavaScript program to make it interactive, all the JavaScript code is usually placed inside the head part of the document.

The other vital pair of tags on this page are the <body> and </body> tags, and it is inside the zone between these two tags that you must place the text which you want visitors to your Web site to see. It is possible to put formatting information into some tags, such as: style="font-family:arial,helvetica,sans-serif; font-size:18pt" - by putting this coding inside the <body> tag I have ensured that all the text in this document is displayed using a particular font and size of text. I have chosen Arial because it displays particularly clearly on LCD screens, and I like to use 18pt because the default size for text is usually too small for comfortable reading on many laptops. Some old browsers don't know what Arial is, so I have put a couple of similar fonts in as alternatives so that they will know to use Helvetica if they lack Arial, or Sans-Serif if they lack both Arial and Helvetica.

The visible title on the page is tagged as a heading, <h1> being for a heading in large print, while <h2>, <h3>, <h4>, <h5> and <h6> are used to create headings of increasingly smaller size, though anything smaller than <h3> is usually too small to be worth using. The tags <center> and </center> must surround anything which you want to appear in the middle of the page (but make sure you always use the American spelling "center" for this rather than the English spelling "centre").

The other tags you will see on this page are the <p> and </p> which mark the starts and ends of paragraphs, though the second of these tags can usually be left out. The first paragraph after a heading is automatically taken as a new paragraph even if the opening <p> tag is missing (though there is no harm in including it anyway. If you change the formatting for a paragraph by inserting extra code into a <p> tag, you should put a </p> in at the end to ensure that the formatting returns to normal afterwards.

Be aware that tabs and extra spaces are completely ignored by browsers unless you code them in a very particular way:        like this (&nbsp; being the code for a single space). &nbsp; can also be placed between two words to make sure that they won't appear with the first one at the end of a line and the other one at the start of the next line.