I wrote these notes years ago, and the whizz-kids will tell you they're out of date, but actually that's not true. There may now be better ways of doing some of the things I'm teaching here, but the whole web is backwards-compatible so you'll never find that a more modern browser will object to something in these notes.
Mozilla is a really good organisation, and if you want more information than is provided here I suggest: developer.
My object is to explain things so that you understand them, so please stop me (in mid-sentence if necessary) if you don't understand, don't agree or need clarification, and I'll do my best to explain things in more detail.
There will also be homework. This is not a high-tech classroom with computers for everybody, so you'll have to do the practical work at home. If you have problems (and you will!) please email me on You must enable JavaScript to see this email address. with a very clear explanation of what the problem is, and either include the web page as an attachment or, if you've uploaded it to a server, give me the URL. If you give your email the subject “Web Course” it will get through my spam filter. If I haven't replied within a day, phone me on 01462 678340 — the message may have got lost, and I'd hate you to think I'd abandoned you. Or call me on Skype — my username is colinhume with no dot.
There's lots of jargon in any computer-related subject. Usually you don't need to know what the letters stand for, just what the thing does. It won't help you at all to know that JPEG stands for Joint Photographic Experts Group, but it will help you to know that it's a good format for holding photographs in web pages. URL is Uniform Resource Locator, which just means the address of a web page. Sometimes the jargon seems to be there just to intimidate the newcomers. I'm bound to use some, and it's up to you to ask if you can't remember what it means — I won't mind.
I don't pretend to know all the answers, or to be covering the whole of HTML and CSS — yes, I will explain what they mean! I'll teach things in what seems to me a logical sequence, rather than giving all the possible options of one tag and then moving on to the next. There are websites which will give you all the options, but I don't think that's the best way of approaching the subject — you don't learn a foreign language by reading a dictionary.
Work out the pages and linkage for the website you are going to build. I assume that you have one in mind, or you wouldn't be on the course. My courses are known for giving the students exercises, because that's the only way you can be sure that you've understood what I'm talking about!
What is a web page?
A web page is a file on a server containing HTML (and possibly other languages). A static web page normally has a file extension of .HTML or .HTM (MS-DOS limited an extension to three characters). It's a text file, readable in any text editor — you don't need a special program to create or view it, just Notepad. And it doesn't (or shouldn't) include any special characters (such as a “£” sign, though of course a “$” sign is considered a normal character). By “static” I mean that every time someone looks at the page they see the same thing — unless you've physically updated it. A dynamic page (which I'm not covering on this course) is a page which is built or modified on the server and then sent off to the user. If you do a search on Google, for instance, the page of links you get back is a dynamic one. There's a third possibility, a static page which contains JavaScript — a programming language that runs within the browser itself. For instance, the pages on my website call a JavaScript routine which displays at the bottom of the page the date when the page was last updated.
Don't use long names for your files. If your website is colinhume.com all the files are within this, so there's no point in calling a file “Colin Hume's Bookings.htm” — just call it “Bookings.htm”. In fact I would never have a space in an HTML filename, as this has caused problems in the past — maybe I'm being unnecessarily cautious but I just won't do it. Your Home Page must be called “index.htm” or “index.html” — there might be other possibilities but this is not an occasion to be imaginative.
What is a server?
A web server is a computer permanently connected to the internet and “known” to the internet. If you type colinhume.com into the address bar of your browser, this domain name gets converted to a string of numbers and dots called an IP Address, such as 80.194.196.34, which tells the browser what server to connect to. By default, since you haven't specified a specific web page in the site, it looks for the file index.htm and downloads it. This may contain the data to be displayed, or it may link to another page in which case you may notice the address bar changing.
Unless you have your own server, you don't create the web pages directly on the server. You create and test them on your own machine, and then upload them to the server. This also means that if you choose to change server, or the server crashes and has to be replaced, you can easily upload all your files to the new server. Yes, I'll be telling you how to do all that.
There are free servers, cheap servers, expensive servers, servers run by the ISP who provides your connection to the internet — we'll look at all that later.
HTML consists of Tags and Elements. A tag is rather like a sentence, and an element is like a word of that sentence. For instance, here's an HTML tag:
<Img Src="Banana.gif" Alt="This is a banana">
It's an Img tag, which specifies an image or picture to be displayed on the web page. The elements are Src, which specified the source of the image, and Alt, which gives the text to be displayed if for some reason the browser does not display the image.
HTML is not case-sensitive, so I prefer to capitalise the first letter of each tag and element. For a multiple word I capitalise the various parts: CodeType, BorderColorLight. If you use XHTML all the keywords must be lower-case, and that's what I used for many years, though I've now switched to HTML 5. In the following examples I'm deliberately using some of each — it's a common belief that all keywords should be in lower-case, but it's not true. Values must be in quotes if they contain any special characters: blank, “#” and so on — basically anything other than alphabetics and numerics. To be accurate, you can also have -_.:. So the above example could have Alt=Banana without the quotes if you wished. But with XHTML the value always has to be in quotes.
Some tags, such as Img, do not have a closing tag — they're a complete unit in themselves. Other tags, such as <HTML> which starts the entire web page, need a closing tag which has the same keyword preceded by a forward slash: </HTML> for instance. Tags can be nested to any depth, but of course you need to close them in reverse order.
Here's a pretty basic web page:<HTML>
You can see several sections here, each started by a tag with the specified name and finished by a tag which has the same name preceded by “/” meaning “end of”. So the whole thing is within the HTML tag. This consists of two sections, Head followed by Body. Head contains one section, Title, and might well contain other sections. Body would normally contain a number of sections, but in this simple example it just contains two words of text.
<Head>
<Title>Hello</Title>
</Head>
<Body>
Hello world!
</Body>
</HTML>
Some people will immediately say, “No, you don't need all of that”. In fact you could have a web page which just consisted ofHello world!
and if you run it on any modern browser it will display perfectly well. But that brings us on to the whole question of browsers.
What is a Browser?
A browser is a program which you run on your computer to allow you to view web pages and download files. To many people, Internet Explorer WAS the internet when I wrote these notes; it didn't occur to them that there's any other way of getting to the web, and Microsoft were very happy for them to continue in that belief. IE has now been replaced by The Edge, but you will still find it mentioned in these notes.) In fact there are many other browsers. I also have Firefox and Google Chrome on my PC (both are free to download) — I used to have Netscape and Opera but they're no longer available. If you're on an Apple Mac, a Unix machine or a hand-held device you may well use something different.
With any normal programming language, the syntax of your program is either valid or not — if you've missed out a semicolon, or misspelt a word, the compiler will give you an error message and you have to correct it before you can run the program. Browsers try to be kind to you. But you don't know what browser your users will have. It may be text-only. It may be on a mobile phone, or on a Mac. If they're blind, it will be speaking to them. Don't assume the whole world uses the latest version of Edge on a PC. There are things you can get away with on IE but not on the others. And unlike a compiler, a browser doesn't usually give you an error message — things just don't work. I've had people telling me that they clicked a button on my website and nothing happened — and it was because they were using Netscape. The code was actually wrong, but IE said “OK, I know what you mean”, and I thought it was fine. So my advice to you, right from the start, is follow the standards. And I also suggest you follow some layout conventions. You will see in my example that <Title> is indented because it's within <Head> — in fact I could have indented everything between <HTML> and </HTML>, though I don't actually do that. As the code gets more complicated it becomes more important to lay it out logically, or you won't have a clue what's wrong when things don't work. The browser won't care if you code it as<HTML><Head><Title>Hello</Title></Head><Body>Hello
but don't ask me to debug it!
world!</Body></HTML>
is a non-breaking space. It is supposedly (as in a word processor) a way of making sure that you don 't get a line-break where you don't want one, such as in the middle of a postcode or a time such as “8 pm”. If my postcode is near the end of the line and I want to be sure that if it won't fit the whole thing will wrap onto the next line, I would code my address as10 Cross Street, Letchworth, Herts, SG6 4UD
But it can also be used to give several blank spaces:10 Cross Street, Letchworth, Herts, SG6 4UD Telephone: 01462 678340
I'm a great believer in putting two spaces after a full stop at the end of a sentence. I think it splits up the sentences and makes them easier to read — particularly computer manuals where dots are used for other purposes as well. So all my sentences end ". ". In WebEdit (described later) you can press Ctrl- (that means hold down the [Ctrl] key and press the “minus” key) to generate the non-breaking space, saving you several keystrokes. In fact if you type a space following another space, WebEdit will change the first one to a non-breaking space. If you're inserting a whole chunk of text from elsewhere (a Word document, for instance), the Edit menu has a Two spaces option which finds each dot followed by a space and adds a non-breaking space as well.
<Br> is a break — the equivalent of a carriage return — continue from the start of the next line.
<P> is a paragraph — leave a blank line and continue from the start of the line after that. On IE this gives a slightly larger gap than <Br><Br>. In fact an HTML validator will object to <P> in some places, and the solution is to replace it by <Br><Br>.
Technically <P> ends with </P> but most people don't know that. In fact WebEdit removes </P> tags when validating the page. If you feel you need a closing tag, please use <Div> … </Div> instead. Note that <P> doesn't indent the first line of the paragraph. I'd say you don't need to, since there's a blank line between paragraphs anyway, but if you want this it can be added with one line of CSS — and you still don't need a </P> tag.
<Div> … </Div> is a division, which does much the same except that you do need the closing tag — we'll see more use for it when we move on to CSS.
You might have:<html>
Answer: probably not! Let's add a couple of things.
<head>
<title>First website</title>
<body>
This is my first website.
<p>Aren't you impressed?
</body>
</head>
The Head section gives information to the browser; the Body section contains information to be displayed by the browser to the user. So in the Head section we've put in a <title> tag. This is used when you print out the page, and it will appear in the Back and Forward history lists in your browser, and on the tab if you're using a tabbed browser, but it won't be displayed in the page itself. To do that, I strongly recommend a Header tag.<h1>First website</h1>
You can use <H1> (biggest) to <H6> (smallest). Once again, think about the contents of your page, and the structure of it. WebEdit will object if the first header is <H2> or you have <H1> followed by <H3>. Start with <H1> and then use <H2> for the major sections of the page and maybe lower-level headers in some cases. Don't worry if the <H1> tag is too big for your liking — you can change the size using CSS. A heading should normally fit on a single line; don't put a whole paragraph of text in. If you want to make your first paragraph stand out you can do it with CSS — that's presentation, not content.
You can also use <b> for bold and <i> for italic — though some purists object to these. I'm not going to tell you the code for underlined, because I don't think you should use it for ordinary text; underlining in a web page should be reserved for links. You can also use <Center> and a corresponding </Center> tag to centre a chunk of text horizontally, though again the purists would object to this as it's layout rather than content. Also note that you must spell it in American! So let's add:<h1>First website</h1>
which will display something like this:
This is my <i>first</i> website.
<center>
<p><b>Aren't you <i>impressed?</i></b>
</center>
Aren't you impressed?
Exercise
Write a short web page about yourself, using one <H1> and three <H2> headings. I suggest that you create a folder (directory) on your hard disk called C:\Website (no, it doesn't have to be under “My Documents”) and save the pages there; in the next session I'll talk more about the website structure.
A comment starts <!- and finishes -->
It can be on one or more lines:
<!-- This is a comment -->
or<!--
Comment 1
Comment 2
Comment 3
-->
If you're an Apple Mac user, have a look at buildmac.htm — if you're a PC user, read on.
This course is not about how to use WebEdit, and if you've spent hundreds of pounds on Dreamweaver I imagine you'll want to use that (which is what my client did), but you're going to need some kind of editor and you might as well use a free one which I know all about and can help you with!
Go to colinhume.com and click the Downloads button at the top to take you to the Downloads page.
Go to the bottom of the page and click the Download button. Select the “Run” button. The WebEdit installation program will be downloaded to a temporary location on your hard drive and then run. There aren't any complicated options for you to choose.
After installation WebEdit starts automatically, and thereafter you can run it from the icon on the desktop (if you selected this option) or from the Start menu. You need to open or create a current file. Don't start clicking on the menu items if you don't have a file — it will blow up and I don't care!
If you don't yet have any HTML files in your website, click File | New | HTML to create a skeleton HTML page. You could modify this to look like my “Hello world” example. Type in the text, click File | Save, choose the directory you have created such as C:\Website and give it a filename of index.htm or index.html — either will be fine and I would use the latter now I'm freed from the DOS three-character limits.
If you've already created the file using some other editor, click File | Open. You will see my Open dialogue — not the standard Windows one because I want to be able to see the contents of my website root directory and any sub-directories in the same list.
Type your root directory such as C:\Website into the Root box and click the List button. You will see the names of all the files in this directory and (assuming the Sub-dirs box is ticked) any directories below this. If things get big, you may want to give a File mask to limit the list to just those you are interested in, for instance “*.css”, but don't worry about that now. Also ignore the Web box, which you use to download a page from somebody else's website — not from yours.
As you would expect, you can double-click on the required file to open it, or single-click and then click Open. You can also just start typing letters and the list will shrink to display just the matching files — press Back if you pressed the wrong key and the whole list has disappeared.
So whichever of the two you did, you are now editing your HTML file. Press F10 to validate and format it. Then press F9 to run it using the internal browser (which is borrowed from IE). Check that the web page displays as it should. Then press Esc to return from the browser to the editor. (Yes, there are menu commands and buttons for all this, but it's so much quicker with function keys.)
WebEdit will add various lines which you know nothing about, but trust me and just treat this as a bit of magic which might be explained later!