HTML for Absolute Beginners, by Jon Storm.
Go to : Next section (basic structure); Beginner's HTML Index; Jargon dictionary; Ultraspace; Jon Storm.

Getting started

The world of HTML is at your feet... Webpages are just ordinary text files, which you can create with any text editor, like Windows Notepad. You just type your text, and add commands called tags to tell web browsers (Microsoft's Internet Explorer, for example) how to display it : change the colour or size of the text, make it bold or put it in italics, display a picture etc. The tags are just text too, enclosed between < > these, which are usually called angle brackets (or less-than/greater-than, if you are a mathematician). This is HyperText Markup Language, or HTML for short. When you save your document, you give it a name with an extension (the bit after the . ) of "htm" or "html", which tells computers to treat it as a webpage. (If you are using a word processor like Microsoft Word to create your HTML document, which I don't recommend incidentally, don't choose the "Save as HTML" option. Use the "Save as text" option instead. I'll explain why later).

If you use a basic text editor like Notepad to create your HTML, you just type the tags in by hand. It's not difficult, because there aren't that many of them and most of them are fairly easy to remember, but you don't even have to do that if you don't fancy it. There are lots of programs that will create all the tags for you (see the page on Webpage tools to find out more).

But whatever you use to create your webpage, you need to be able to read the tags to understand what is going on, and make sure it looks the way you intended, and that's what I'm going to teach you. Not every tag there is, just the ones you need to construct a basic webpage, plus (if you're very good) a few easy tricks you can use to make it stand out from the crowd.

Looking at other people's pages...

Here is a great trick to start off with : have a look at the HTML code for this page you're reading now. Click on "View" on your browser's menu bar, and select "Source" from the menu. A Notepad window will open, showing the HTML. Scroll down a few lines past the cluster of tags at the beginning (all the stuff between < > these), which we don't need to worry about for the moment, and you will see the text you have just been reading, with a few tags dotted about in it, mostly turning bold and italics on and off, or starting a new paragraph.

If the text isn't there, just some tags, you are probably viewing this site through frames - maybe you came here from Ask Jeeves, or via ultraspace.co.uk, both of which use frames. You can get rid of the frames and come here directly by typing "http://www.jonstorm.com/html/start.htm" into your browser's address box (or highlight the above address, copy it with Edit Copy, and paste it into the address box with Edit Paste, which is much quicker than typing it). Then press Return, and this time View Source will show this page's HTML. Honest!

The reason this is such a great trick is that it will work on any site which doesn't use frames (and most don't), so if you see something you like on a webpage somewhere, you can look at the source code for the page it's on, see how it's done, and maybe copy or adapt it for use on your own pages. There is nothing dishonest about this : you can't take other people's pictures or text without permission because of copyright, but tags aren't copyright, so help yourself. No sense re-inventing the wheel.

...and working on your own

You can use this exact same trick to work on your own pages. Once you have created the basic shell of your page and saved it on your hard disk (see the next section), when you double-click on it your browser will launch and display it. Select View/Source as before, and a notepad window opens on top of the browser window with the HTML source code in it. Because you have launched it from your hard disk, you can edit the HTML code in this window, save, press the browser's Refresh button and see your changes instantly. I'm writing this paragraph using exactly this technique.

Something to watch out for. It's very easy to forget that you have minimised or hidden the HTML source code window, and use View/Source to open another one. And another and another, till you have umpteen slightly different copies of the HTML open at the same time. When this happens to you, and it will, make sure you close them all without saving. Each one is a snapshot of how the HTML was when you last saved in that window, so if you save from a window with an early version of your page in it, but you subsequently made lots of changes in another window, all your later chages will be lost.

How browsers work

When you design a webpage, you need to be aware that it's not quite like designing a printed document. When you design a document and print it out, everyone who looks at it sees exactly the same thing, but this is not true for webpages. This is because there are lots of different browsers, and lots of totally different computers running them. Because HTML pages are made of just plain text, totally incompatible computers like PCs and Macs can both understand and display them, usually more-or-less as the author intended, which is the Web's great strength. But unfortunately all these different browsers don't always handle all HTML instructions exactly the same as each other, and to make it worse, browser manufacturers have sometimes added extra features to their version of HTML, and told the others about it later.

So you will sometimes find that a website will look great on one computer (or browser) but not so good in another, because the author has used a special feature that not all browsers/computers support. Or designed it to look good in a full-screen window on a large monitor, and didn't check that it worked for people browsing in a window on a small monitor. An easy way to see what I mean is to try changing the size of the window you are looking at this page in. As you make the window narrower, the text reorganises itself to fit the window, so each paragraph has more lines, but fewer words per line. With just text that doesn't matter much, but it does for a lot of pages.

Fortunately, HTML is pretty forgiving, so you don't need to worry about this too much if you keep it fairly simple. But be aware that some people browse with pictures turned off, or with their browser set to ignore the colours you specified, or with your favourite gimmick disabled, and don't place too much reliance on any one particular trick.


Go to : Next section (basic structure); Beginner's HTML Index; Jargon dictionary; Ultraspace; Jon Storm.