Lesson 1

Introduction

A bit of history
The Internet started as a network of computers at academic institutions that enabled the exchange of information between these institutions. This network succeeded the US defence network ARPA. Thus e-mailing was born. To save having to respond to requests for information, Tim Berners-Lee, a scientist at Cern, suggested a method of putting this information on-line and so the world wide web was born. Web pages use a computer language known as HTML (HyperText Markup Language). This language has passed through various versions. After version 4.1, HTML was renamed XHTML (eXtensible HyperText Markup Language) and it conformed to the rules of XML, a general markup language which only impinges slightly on us here and now.

It has been felt for some time that the content, the information which users see, should be separate from the way in which this information is presented. To achieve this an additional modifying language, CSS (Cascading Style Sheets), is being developed. This tutorial will cover CSS later in the course. However, this means that some deprecated techniques must be learnt first.

File Names
Lets start with a digression! In days of old, when knights were bold and computers were little more than a gleam in the eye of Intel and Bill Gates, files were given names comprising two parts, separated by a full stop. The first part, called the name, comprised up to eight alphanumeric (letters and numbers) characters with the first being a letter.

The second part of three characters, called the extension, with similar restrictions, categorises the file type and the program that makes use of the file. For example, the extension, '.txt' indicates a Windows notepad file, while '.doc' or '.rtf' indicates a word processor file.

HTML and Tags
Web pages, which are useable in a web browser, have the extension '.htm' or 'html', standing for 'hyper text markup language'. These files can be written using a text editor, such as Windows notepad. These '.htm' files differ from '.txt' files in that they contain instructions to the browsers, known as tags. These tags are contained in triangular brackets; e.g. '<' and '>'. Tags almost always come in pairs. One to turn something 'on', followed by the content to which this tag applies. This, in turn, is followed by a closing tag, which turns the something 'off'.

The something can be a heading or a paragraph. Closing tags are distinguished by a forward slash '/' immediately after the opening '<'.

Empty Tags
There are a group of tags which include their own content. They, therefore do not require a closing tag. In the latest version of HTML, these so-called empty tags are effectively self-closing. They contain a forward slash just before the closing bracket. Also to be compatible with older browsers, this is preceded by space; e.g. '<hr />' instructs the browser to insert a horizontal rule. Lift the cover on Web Pages
To look at the HTML code from a browser, click on the 'View' menu. Somewhere near the bottom of this menu click on 'Source'. Alternatively, some pages are split up into separate frames. A clue to this are additional scroll bars. To lift the cover on this type of page, right click on the part of the page in which you are interested. Click on "View Source" in the menu.

Do not try to look at the HTML for this page. You may find it a bit confusing. To see a simple HTML page, view the source the page that you get when you click on the link below. TO RETURN to this lesson click on the 'Back' arrow in the browser tool bar!

Attributes
Tags may also contain modifying instructions, called attributes. Attributes take the form: attribute="value". Note the obligatory equals sign and the quotes.

Your first Web Page-The Template
Now its time to start writing web pages! All web pages contain common elements. It is this collection that we will write first and save on the hard disk. It can serve as a template for writing real pages.

First, open My Computer, double-click on the 'C' drive and right-click on the window. Go to new on the menu that appears and on the next menu click on 'Folder'. The name 'New Folder' appears blacked out against the new folder. Type in the new name 'Website' and press 'Enter'.

Now open 'Windows Notepad' and type in the following:

<html>
<head>
<title></title>
</head>
<body>
<h1></h1>
<p></p>
</body>
</html>

Now save this as 'tmplt.htm' in Website.

Next time you want a new web page, you can just reopen your template and it gives you a start in writing your web page. It is a good idea, as soon as you have the template and before you start writing the new web page, to save the page under its new name, e.g. 'pagename.htm'

A few words of explanation

Note that all the tags in the template come in pairs. The 'html' tags enclose the whole web page. Within these are two separate sections: the 'head' and the 'body'. The 'body' section contains everything that you see in the browsers window. The 'head' section contains the web pages title which is displayed right in the top coloured bar of the browser window.

The 'h1' tags enclose the largest heading. The numbers run from 'h1', the biggest, to 'h6', the smallest. Normal text is about the same size as an unmodified 'h4' heading.

The 'p' tags define the limits of a single paragraph. NOTE: Browsers ignore carriage-returns. Instead use the paragraph tags or the line-break tag '<br />'.

EXAMPLE
To see what can be accomplished with what you have learn so far, (1) click here for an example.

Postscript
You may wish to take a course which takes a slower and more leisurely pace. I have found none better than the beginners course at www.pagetutor.com. Its only drawback is that in some respects it is not entirely up-to-date. Bear in mind, as you work through it, the points in this course that differ from those in the pagetutor course, and you will get the best of both worlds.

Course contents

Next Lesson