Learning to write a web page

      _________  
     /         \ 
    (  H T M L  )
     \ ________/ 
      V          

      _________  
     /         \ 
    (  H T M L  )
     \ ________/ 
      V          

HyperText Markup Language. That is the first language you need to learn to write web pages. It is the language which teaches the browser about the colours you want, and how big you want things, and where exactly on the page you would like them. For fancy things like buttons etc., you will need to learn another 'language'. But by that time, you will want to!

The .html file

Files usually have a so-called 'extension' to their name, indicating what type of file they are. For HTML, the extension .html is used. On PCs this is often shortened to .htm, but the most modern ones accept a four-letter extension happily, so it would be best to stick to that.

Web browsers are terribly clever, really. If you make a little file which you call 'test.html', with a little bit of text in it (see exercise), a browser will be able to cope with this. Give it a try!

Exercise

1. Open WordPad (a little 'accessory' program which should live under Start (bottom left of the screen), then Programs, then Accessories). If you are not on a PC, get into your text-editor (e.g. vi or emacs).
2. Type:

   This is the first test of our abilities to make a web page.

3. Make a folder 'C:/My Documents/OOSC-kk2/KKweb/' (or the equivalent for your computer setup).
4. In this folder, save the WordPad text into a file called 'test.html'. Make sure you save it as a 'Text Document' type, not a 'Word for Windows' type or something.
5. Double-click on 'My Documents/OOSC-kk2/KKweb/test.html' and see what happens... (if you are not on a PC, you will have to do 'File > Open page...' and browse for the correct file)

The result is extremely bland. Everything is default: the letters, the colours, the size, everything. The browser decides what to do with it. Let's just be happy it knew what text to include!

Back to contents

What do we need? HTML and the .html file Tags Formatting Head and body
Size and shape Colour Colour table Colour wheels Pictures
Special characters Special characters table Hyperlinks Combining and nesting tags Lists
Tables Frames Style sheets Maps Forms Scripts Publicising (meta tags) Bits and pieces