Kaye and Geoff's web page documentation 

Introduction to HTML

The basis for every web page is a text file, written using a simple "markup" language called HTML (HyperText Markup Language). All the text that the web page designer wants to appear on the screen is written into the file, along with special instructions on how to display it. The text file may also contain instructions to control the display of images, and possibly other media, and to allow links to other web pages.

Note that a text file should be created by a text editor rather than a word processor (such as Word). A word processor adds lots of (unseen) formatting characters in the file which it creates, and these characters would have no meaning in an HTML file. You can instruct most word processors to "save as text" but as you might expect specialist text editors are better suited to the job of editing text.

HTML is called a markup language, because it uses tags to "mark up" sections of text. Tags are instructions to a browser (for example Firefox or Internet Explorer) to display the page according to the designer's requirements. HTML tags are simple codes placed into the text to be displayed. Tags are separated from the text by enclosing them in angle brackets, and usually have the effect of turning on a feature or characteristic (with the placement of an opening tag) and turning it off again when you want the effect to stop (with the placement of a closing tag). Terminating tags are the same as their matching opening tag, but are preceded by a slash (/) character.

So, to cause text to be displayed in bold type, you use the <b> tag, as follows:

<b>text to appear in bold format</b>
Similarly, to cause text to be centred on the page, you use the <center> tag:
<center>text to be centred</center>
You can combine the two effects so that the text is both bold and centred:
<center><b>text to be centred and emboldened</b></center>

Here is the HTML for a simple but complete web page. It uses more tags than we have discussed so far, but you will recognise them because they are enclosed in angle brackets. It also has a simple structure which we will explain below.

<html> <head> <title>Simple sample web page</title> </head> <body> <center> <h3>An example of a simple web page</h3> </center> <hr> <b>This line is bold</b> <p> <i>This line is in italics</i> </body> </html>

This is what the page would look like when displayed in a browser:

Basic HTML structure and rules

The HTML which describes the page above has a simple structure - a pair of tags (<html>...</html>) define the start and end of the overall page, and within them there is a head section (defined by the <head>...</head> tags) and a body section (defined by the <body>...</body> tags). The head section only has administrative information while the body section has the contents of the web page.

There are several tags in the sample above which need to be explained. The <title> tags enclose text which is used as the title for the browser window (as displayed in the sample window above). The <h3> tags define text which will be used as a heading - there are a range of these tags from <h1> (specifying a major heading) to <h6> (specifying a very minor heading). The <hr> (horizontal rule) tag puts in a line, usually used as a divider, and is an example of a tag which does not require a closing tag. The <p> tag (again not requiring a closing tag, although it can have one) inserts a blank line - ie. starts a new paragraph. The <i> tag specifies that the enclosed text should be displayed in italic format.

It might not be immediately obvious in the above example, but all white space character sequences are treated as one space (white space includes tab, space, return and line feed characters). So you can set out your HTML for readability (taking new lines for new sections and so on) and use tags (for example <p>) to control the layout of the web page. In fact you must use layout tags because otherwise your text will just appear to the browser as one huge single line which will therefore continue across the window, wrapping only at the right hand edge of the browser window - not normally what you want.

Another HTML "rule" is that browsers will recognise tags written in either upper or lower case (to conform to modern standards strictly you should use lower case, but no current browsers worry about it). If you use a tag (ie. something in angle brackets) which the browser does not understand then it will normally remove it, but otherwise ignore it.

More tags

You should have the idea by now. Here are a few more basic tags to play with before considering the more complex ones:

<br> (break) - specifies a line break, ie. like a paragraph without the blank line (another tag which does not need a terminating tag)

<u>...</u> (underline) - the enclosed text is underlined

<blockquote>...</blockquote> the enclosed text is displayed with its left and right margins moved inwards

<pre>...</pre> - the enclosed text is displayed as typed (ie. white space characters are honoured)

<!--...--> (comment) - the enclosed text is ignored by the browser. Notice that these tags do not "match" and do not follow the rule that a closing tag is the same as the opening tag but preceded by a slash. Who knows why this one has to be different.

Tag attributes

Attributes specify additional information about the effect that a tag should have. Some tags have one or more required attributes but in the majority of cases the attributes are optional. Attributes are placed after the tag name within the angle brackets, separated by spaces, and are of the form "name=value", for example:
<hr width="50%">
This specifies a horizontal rule which only goes half way across the page. Note that to conform to modern standards the value of the attribute should be in double quotes, although no current browser insists on this. The horizontal rule has other possible optional attributes, for example ("size" in this case means "thickness"):
<hr width="50%" size="5" align="center">
which is displayed by the browser as:

Attributes of all the tags considered so far have been optional. An example of a tag which has a required attribute is the <img> tag which is used to define the inclusion of an image. On its own the tag does not provide enough information to complete the process - the browser also has to know where to get the image from and which image to get. This is specified with a src (source) attribute, as in the following example:

<img src="map.gif">
There is a lot more to say about the use of images, but we will leave that until later. While some tags have only optional attributes, the tag may be fairly meaningless without at least one attribute. For example the <font>...</font> tag has attributes which change the font size and colour of enclosed text; all the possible attributes are optional but with no attributes the tag would not have any effect.

Displaying your page

The minimal information provided so far on this page is enough to allow you to write a simple web page. But you need to check how your newly created HTML looks in a browser, just in case (heaven forbid!) you have made a mistake or have not understood how your browser will display your HTML. Common mistakes include mis-typing tags, omitting closing quotation marks on attribute values and so on. To see your page you need to go to your browser's "file" menu and choose "open file" (the exact words might be different depending on your browser/operating system combination, but they should be recognisable as having the same effect). Once you have your page displayed, you need to reload it using the appropriate browser icon after you make any changes to the HTML, to see what effect the modifications had.

This method of displaying a web page works within your computer, without involving the internet. Eventually you will want to make your web site "public", that is, available to be viewed over the internet. How this is done will be discussed later.

Other sources of HTML lessons and information

Do you still want to learn how to create web pages but do not think much of our pages? We will try not to take it personally; as an alternative you could try:

For even more links to these and related topics have a look at our Creating web pages page.
Top
Next
Index
Home