Introduction to HTML

Creating a basic web page is quite simple. You can use Word, for example. Just create your page as though it were an ordinary Word document, and then select HTML/web-page as the file-type when you save it. The resulting file will almost certainly appear correctly in Internet Explorer in Windows, but such general purpose rarely produce a well-formed web-page that will appear correctly in all browsers and under all operating systems.

You could use a specialised tool, such as Dreamweaver or Expression Web, to produce more impressive results, but I think it's still worth taking the time to understand how HTML (and CSS) work, because sometimes they don't do exactly what you want, and you need to tweak the HTML code yourself.

The basics of HTML aren't too difficult to learn, and are described here.

HTML stands for "hypertext mark-up language", and is the language that is used to tell the web browser (e.g. Internet Explorer or Firefox) what to display. If you ever word-processed in the 80s, with applications such as WordStar, then you'll find the principles of HTML quite straightforward.

For a fuller introduction to HTML, download this PowerPoint presentation.

Tags

Each page of your web page is stored in a file that ends in .html. This file contains the text that you want to appear on the screen, and the names of any pictures that you want to appear. It also contains what are known as "tags", which tell the computer how to display the words and pictures - i.e. they add the style, which might be the font, colour, alignment, etc.

Tags are used, for example, to make text bigger or smaller, to change the typeface, or to embolden or italicise. Tags are enclosed in triangular brackets, and are usually appear in pairs; one to start the formatting, and one to switch it off again (very much like the first word processors, such as WordStar). The closing tag normally has a '/' character before the code.

For example, the following tags in an HTML file:

<h1>Heading size 1</h1>
<h2>Heading size 2</h2>
<h3>Heading size 3</h3>
<h4>Heading size 4</h4>
<h5>Heading size 5</h5>
<h6>Heading size 6</h6>
<b>Bold text</b>
<i>Italic text</i>

Produce the following on the screen (note that I'm using a style-sheet, so your headings will be in black Times New Roman unless you've redefined them):

Heading size 1

Heading size 2

Heading size 3

Heading size 4

Heading size 5
Heading size 6
Bold text

Italic text

The only common tags that don't appear in pairs are <br> (which is used to start a new line, much like pressing the Enter key in a word processor), <img> (which is used to insert pictures) and <li> (which is used to numbered lists, or lists with bullet points).

The <br> tag is important because the web browser ignores any newline characters (i.e. when you press Enter) in an HTML file, so that if you enter the following, for example:

My first line of text
The second line of text

The following text will appear on the screen:

My first line of text The second line of text

For the text to appear correctly, what you need to enter is:

My first line of text<br>
The second line of text

That said, it's probably better to get into the habit of using paragraphs to separate text, e.g.

<p>My first line of text</p>
<p>The second line of text</p>

In the same way, the web browser ignores all but the first space between words, which is why this text appears with only one space after a full stop.

HTML Documents

All HTML documents should contain at least the following tags:

<!doctype html>
<HTML>
<head>
<meta charset=utf-8>
<title>The title of your page goes in here</title>
</head>

<body>

The content of your web page goes in here

</body>
</HTML>

These tags tell the browser that your file contains an HTML document and mark out the header and the body of the page. The <title> tags are used to give the page a name, which appears across the top of the browser window (for example, where it says "Creating your own web page" at the moment). The <!doctype html > part tells that browser what version of HTML we're using; the above example is valid HTML5, which is actually much simpler than previous versions.

Finally, one of the best ways of learning how to use HTML is to look at other people's pages. If you want to know how a particular web page has been created, you can select Source from the View menu. This will show you the contents of the HTML file that is used to create the page. When a page uses frames, you can view the HTML for a particular frame by moving the mouse pointer over that frame and clicking the right mouse button. Choose the View Source option from the menu that appears.

Click here to see how to insert pictures...