Modern web-pages often use a combinary of techniques, or languages, or produce the desired result. With HTML5, styling is done entirely with CSS, so it's important to understand the separation of style and content, and the role of the three technologies in rendering the finished page.

HTML defines the structure of the page, e.g. saying which text is a heading, which is a paragraph, which is a footer, etc.
CSS defines what the page looks like, e.g. saying that headings are bold and magenta Arial text, paragraphs use fully-justified Verdana with 1.5 line-spacing, etc.
JavaScript is a programming/scripting language that can be used to add interactive elements to your page.

There is a separate section of the site with JavaScript examples, and examples of JavaScript programs can also be downloaded from the Learn to Program page. There are some examples of CSS in this section.

HTML

Creating a basic web page is quite simple. Web-pages are just text files, and can be made in a simple text editor, such as Notepad.

Even if you use a more specialised application, such as Dreamweaver or Expression Web, to quickly produce more complex pages, I think it's still worth taking the time to understand how HTML and CSS work, because sometimes these applications don't do exactly what you want, and you need to tweak the HTML code yourself. I have also created a video introduction to HTML and CSS in YouTube.

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>
<strong>Bold text</strong>
<em>Italic text</em>

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

Note that you can also use  and  for bold and italic text, but this is seen as "non-semantic" (i.e. doesn't give structure to the document) and so  and  are now preferred.

The only common tags that don't appear in pairs are   (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   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...