HTML is very simple. All it is, is a plain text file which contains text and tags. The text is what you see on the page and the tags define how the text will look. That's it, no more. Well, HTML actually stands for HyperText Markup Language. And that is the last technical term you will find.
Tags are commands which appear in the document (but are not usually displayed in the browser) which tell the browser what to do with the following text. The browser reads these tags and changes fonts, inserts graphics, changes colours etc. You as the user, don't get to see what tags are in a document (or web page) unless you click on view then on source from the menubar (or right click on a page and select view source from the menu that appears)
Tags are always entered in 'angle brackets' which are simply greater than and less than characters from the keyboard. Of course, this means that I can't type an angle bracket into this text because the browser will strip it out expecting a tag. I have to use some special text to make < and > appear. There will be more on this later.
Tags mostly always come in pairs - an opening tag and a closing tag. An opening tag looks like this <HTML> while the closing tag looks exactly the same, except a slash is added before the tag name. The closing tag for our example is thus </HTML>
By pure coincidence, the HTML tag is the very first one that appears in any html document. It tells the browser that this file (all pages are files) is written using HTML and that the browser should interpret it so.
An HTML file needs to have a few mandatory tags as follows :
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
The HEAD tags define information which is used by search engines and WebBots to index your page(s) on a search engine's index. Additionally, JavaScript functions are also defined in the head area. (I might mention more about JavaScript later.)
These simply define what title will appear along the very top of your browser.
BODY tags are where you have to write the meat of your web page. Any text etc that appears between the start and end BODY tags will appear in the main window of your browser.
So, lets do our first web page before you all get bored. Fire up your trusty editor and type the following HTML code into a new file.
<HTML>
<HEAD>
<TITLE> My very first HTML document </TITLE>
</HEAD>
<BODY>
Hello World !
</BODY>
</HTML>
You can use whitespace (spaces, tabs etc) to break up the code and make it look neater if you like. The browser won't mind, but remember, you can't break up the tag names !
Save the above code into a file called exercise_one.html on your hard disk somewhere. If you are using NotePad then make sure you have selected 'all files' in the file type drop down and then put the filename in quotes anyway. (NotePad has a very annoying habit of putting '.txt' on the end of any filename you type if you don't put quotes around the name. Microsoft knows best - I think not !)
Now that you have saved it, run up your browser and select file | open and navigate to wherever you saved the file and select it. The browser will open the file and your work can be seen in all its glory. Have a look at what you can see, in the title bar at the top you should see My very first HTML document - Microsoft Internet Explorer and in the main window of the browser, you will see Hello World ! on a white background.
Now, tell me that was difficult ?
HTML filenames should never have spaces, never have capital letters and sometimes, never have digits in them. They should always have the file extension '.htm' or '.html' - I prefer '.html'.
The reasons for this are many, but most proper servers are Unix boxes and Unix is case sensitive so the file 'Index.html' will not be found if you type in 'index.html'.
Spaces are replaced in HTML with '%20' so the file 'index one.html' becomes 'index%20one.html' and once again, cannot be found.
Digits seem to give problems on some servers. Freeserve.co.uk is one - my night school lecturer has major problems if a file with a digit is uploaded - the system cannot find it again !
The tags we have used so far have been quite simple. We can add attributes to most tags to make things a bit better. For example, our BODY tag defines how the document will look, so lets jazz up our main window by adding a background colour. I use the IVORY colour for most, if not all of my backgrounds. I find it quite restful on the eye and it is less glaring than the default white.
Ivory, is not a recognised name for a colour - it may be handled by some browsers, but as far as the WWW Commission is concerned, (W3C), only 16 pre-defined colour names exist.
How is this done ? Simple, return to your editor and change the BODY tag to read as follows :
<BODY BGCOLOR="CYAN">
Save the file and return to the browser, click on the REFRESH button and be amazed as your document is reloaded and the background colour changes to a nice cyan colour. Who said HTML was hard ?
Attributes must have their values in double quotes. Some word processors change these to 'smart quotes' which are different and cause problems when the page is displayed. Try not to use a fancy word processor for HTML - it's really not worth the hassle.
The sharp eyed viewer will have noticed that BGCOLOR has been spelt incorrectly. This is because the Americans - who designed HTML - don't spell their words properly. This is just to get back at the proper English language speakers from whence they originated (and fought for independence from). (JOKE - OK, DON'T SEND THE BOYS ROUND !)
For this reason, we must use the American spelling for certain words, COLOR, CENTER etc. You can see the effect when you spell BGCOLOR 'correctly' - try it now, change BGCOLOR to BGCOLOUR, save the file and refresh the browser. You go do that now, I'll wait for you here ....
Don't forget to 'fix' the spelling back to American & save the file. Well, did you notice what happened ? The background returned to the default of white. This is a requirement of the HTML standard, any tags that the browser doesn't recognise are simply ignored. Some browsers are better than others at handling unknown tags - some just get in a mess.
The BODY tag has a few more attributes and some of these are listed below (the ones that should be standard amongst all browsers):
Return to your editor and change the BODY tag to the following :
<BODY BGCOLOR="#FFFFF0" TEXT="BLACK" LINK="BLUE" VLINK="PURPLE" ALINK="RED" >
Save the file and refresh the browser again - notice any difference ? Correct, there is none ! We will fix this later.
Colour (color) codes are defined as a name (as in the above examples) or a hexadecimal number with 6 characters following a leading hash (#). The format of the number is split into 3 parts - a red part, a green part and a blue part in that order. The first two hex digits define the red color values, then green then blue. (RGB)
Hex values range from "00" to "FF" where "00" is nothing and "FF" is full on intense colour. (In the colour examples).
Using my favourite ivory background as an example, we have a colour code of "#FFFFF0" which means all red plus all green plus some blue = ivory. To make life a bit easier, all (?) browsers recognise 16 pre-defined colours. The following table shows the recognised names, the actual hex code and an example of how the colour looks :
| Name | Value | Example |
|---|---|---|
| Silver | #C0C0C0 | |
| Gray | #808080 | |
| Maroon | #800000 | |
| Green | #008000 | |
| Navy | #000080 | |
| Purple | #800080 | |
| Olive | #808000 | |
| Teal | #008080 | |
| White | #FFFFFF | |
| Black | #000000 | |
| Red | #FF0000 | |
| Lime | #00FF00 | |
| Blue | #0000FF | |
| Magenta | #FF00FF | |
| Yellow | #FFFF00 | |
| Cyan | #FF00FF |
Now, while I was playing around with the colours, I noticed that I could change my BODY tag to replace #FFFFF0 with ivory and it still displayed the background colour properly. This could be browser dependant though, so I shall continue to use the colour codes unless one of the 16 pre-defined colours is required.
So what did we do when we changed the BODY tag a few seconds ago (or lines back !) ? Not a lot, we told the browser to display the text in black ink on an ivory background. Any links on the page will be displayed in blue, when the mouse hovers over the link, it will change to red and when we return to this page after clicking on a link, it shall be shown in purple. As we don't yet have links (coming soon !) we can't see them yet.
Oh all right then. Make the text included in the BODY tags look like this :
<BODY BGCOLOR="#FFFFF0" TEXT="#000000" LINK="#0000FF" VLINK="#800080" ALINK="#FF0000" >
Hello World !
<A HREF="http://www.dunbar.cwc.net/qdos/qdos.html">Go to Norman's QDOS pages</A>
</BODY>
As usual, save it, switch to the browser and hit refresh. You should now see a piece of blue underlined text saying 'Go to Norman's QDOS pages' after the 'Hello World !' text in black. Move the mouse over the underlined text and it changes to red. Click it and the browser will try to connect to my QDOS pages. If you are online then you will eventually get there, if not, cancel the dial-up request and note that underlined text is now displayed in a sort of purple colour.
You have now just created a link to an external web page (one of mine). There will be more on this topic later, but for now, that is the end of lesson one. Hope you enjoyed it.
Malcolm Cadman suggested a rework of this page because I was using hexadecimal numbers before I had explained them. Well spotted Malcolm & thanks.
| Previous Lesson | Home Page | Next Lesson |