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:
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.
An example of a simple web page
This line is bold
This line is in italics
This is what the page would look like when displayed in a browser:
Basic HTML structure and rulesThe 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 tagsYou 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 attributesAttributes 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:
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:
Displaying your pageThe 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:Creating web pages page.