Introduction to HTML

The majority of the web pages you see are written in HTML - Hypertext Markup Language. Although it's called a language, it's not as difficult to learn as French or German or C++.

The language was invented because scientists working at the Nuclear Physics Research Centre (CERN) in Switzerland wanted to be able to share their papers with colleagues throughout the world using what would later become the internet as we know it. Basically they needed to be able to show a text document on the computer screen, perhaps with a few pictures, and to be able to link the pages together so that the reader could jump easily from one page to another.

Now, although nuclear physicists are pretty good at nuclear physics they're not necessarily as expert as you when it comes to using computers, so the new HTML had to be kept fairly simple. The answer they came up with was to use text in the usual way but to add 'tags' to the text which would show how the formatting of the text was to be changed. For example, if they wanted to make a word bold they would surround the word with a 'bold tag'. Tags in HTML consist of a keyword or letter surrounded by angle brackets - the 'bold tag' looks like this: . To mark the end of the bold section we use a closing bold tag which looks like this: . Have a look at an example:

Here is a paragraph with some bold text in it. The coding looks like this:

Here is a paragraph with some bold text in it.

Throughout these pages I will be giving examples of the use of the HTML tags. I recommend that you try these tags yourself by creating a document using the tags and then viewing it in your own browser. But if you prefer to take the easy route, beside many of the examples you will find this symbol: Click on the symbol to see how the example will appear in a browser (your browser will open a new window to show the example - simply switch back to the original window to continue with this tutorial).

Many of the tags we use in HTML work in the same way as the tag. Below are some other tags which we can use to format text.

<I>...</I>	Makes text italic
<U>...</U>	Underlines text (not always a good idea as it can be mistaken for a link)

Click the camera image to see examples of some more tags.

Trying it out

Because HTML uses only text you can write a web page using nothing more than Windows' Notepad program. Try typing the example I gave above into Notepad and then saving the text file with a name like page1.htm (the extension .htm or .html is usually used to denote an HTML document). Now use your internet browser to have a look at your first internet document. If you're not sure how to do this, take a look at the section on Using a browser to view your pages.

Easier Page Creation

Making an HTML document can be made a lot easier by using a purpose-made HTML editor rather than Notepad. There are many of them on the market, and some of them will cost you an arm and a leg! However there is a cheaper solution! Download PageBuilder, a top-rated HTML editor which was designed for students learning to create their own web pages - and it only costs $45 (or £25 if you pay in UK currency), less than half the price of some other editors. You will need to have installed Microsoft Internet Explorer version 3 or above which is used by the built-in browser. This makes viewing your page a simple matter of clicking a button. Please note that it will only work with Windows 95. Click here to find out more about PageBuilder

Paragraphs and Line Breaks

Once you've got the previous example working OK, try the example below:

This line is bold
This line is italic

This line is both bold and italic

Use your internet browser to see the result - see anything wrong? You should do, because the browser takes no notice whatsoever of the neat way you've laid out the lines of code. Although you've put each piece of the code on a separate line the browser has joined them all together! What's going on?

When you want to display your text on several lines you must specifically tell the browser to start a new line. We can do this by using some new tags. The line-break tag   tells the browser to start the next part of your document on a new line. We can string as many tags together as we like. For example putting in your document will drop down three lines. Note that unlike the text formatting tags we've looked at so far, there is no 'closing' tag for this one.

The other tag we can use is the paragraph tag (). This will start the next piece of the document two lines down - in other words it inserts a blank line between the paragraphs. Unlike the line-break tag we cannot string these together - putting in your document will still only cause one paragraph break (spaces are the same - you can put as many spaces together as you like, but your browser will ignore all but the first one). You don't have to put a closing tag with the paragraph tag, but if you want to you can use the form ....

OK. Now try rewriting the previous example like this:

This line is bold 
This line is italic

This line is both bold and italic

I should tell you at this stage that although the examples we've been trying will work, they really shouldn't - we've actually missed out a lot of very important coding. When you are happy about using these simple tags, go on to the next section called Layout of a Basic Web Page and see how we should really have laid out our page.

Top of Page

This page hosted by

Get your own
Free Home Page

These pages are copyright © Terry Franks June 2003.

Last major revision: 28 January 1999 at 22:46 BST
Minor revisions: 10 February 1999 at 00:10 BST This document URL: https://members.tripod.com/~terry_franks/webintro.html

TerryFranks is
a member of