An HTML tutorial

The Basic page framework

Every HTML page needs a "head" section, which contains stuff about your document, and a "body" section, which contains your document. The document can be anything: a story, an advert, you name it.

So, the basic framework of an HTML page is ^[1]:

    <html>
        <head>
            <title>A title goes here</title>
        </head>
        <body>
            Write your page in here
        </body>
    </html>

There you go; it's not that complicated, is it? The best way to learn HTML is to have a go yourself and try things out. To do this, you'll need to write the HTML in a text editor (like notepad), and load it in your web browser. There are more detailed instructions
There's a whole article on How to create & edit an HTML document in Windows which you may find useful.

Basic Tags

The document (the "body" section) can contain any HTML tags, and some of the tags such as "table" tags, can contain any other HTML tags, including more tables, for example.

Here are some basics to get you going:

For bold text, use <b> and close it with </b>

For italic text (sloped), enclose the text in <i> and </i>

To get typewriter style text, use <tt> and </tt>, or if you've got a large section with line breaks, like the "Basic page" above, you can use the <pre>preformatted</pre> container.

You'll notice that these things in angle brackets have a start tag and an end tag with a slash on. These are called "container" tags. You will need to close them in the reverse order that you opened them, otherwise, you may get unexpected results.

To start a new line of text, you can use the <br> tag, which "introduces a line break, or a <p>aragraph tag, which generally also adds a blank space before the next paragraph. These two tags are not containers; they are self-contained tags. (Sometimes, they are written with a '/' on the end, like <br/> which is the correct way in "XHTML". Don't worry about it for the time being; either style will do.).

There are 3 symbols which have special meaning in HTML. These are the less-than and greater-than symbols, and the ampersand (the 'and' sign). These can be displayed in the browser using a special sequence.

Symbol	HTML sequence
&	&
<	<
>	>

Section headings are written using <h1> and </h1> for the largest heading. Up to 6 levels of heading are available using <h1> down to <h6>.

Note that h6 looks smaller than normal text.

h1

h2

h3

h4

h5

h6

Links

Just before we move on to a second page, to explain how tables are written, we'd better explain how links work. Links can point to other pages, or to other sections within the current page (or even to a specific section in another page). We will concentrate on links to other pages first.

The syntax is <a href="address">words to appear on screen</a>

Let's move on to Page 2, which is called "html2.html", and the link for it is <a href="html2.html">Page 2</a>

Notes:
[1] Actually, this isn't strictly true; a thing called a DOCTYPE is needed as well, if you want to be really pedantic, but for now, the framework is good enough.