Build your own Website: Session 1 
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.
Introduction
Who are you, what's your background, and what do you want from this course? You don't have to have a clever answer, but if there is something specific that you want me to cover it would help to know in advance.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.
What do you want the site to do, and who is it aimed at?
This is a vital question, but one which too often does not get asked. If you want a website to show your holiday photos to friends around the world that's fine, but it will be a different site from one which is trying to sell your books and CDs or persuade people to donate to a charity. Think what image you want to project, and look at similar sites to see how they come across to the reader. Do you want it to look professional, trendy, intriguing, user-friendly, entertaining… I'm not saying all of these are mutually exclusive, but you must be aware of how your target audience will react to the content and layout of your site.Content and Layout
This is a vital distinction. The most important thing in almost any website is the Content — what the site it all about. The Layout may be what hits you first — flashy animation, menus that slide out from the side of the screen and glow when you hover over them, pulsating background colours, moving images — but if the site doesn't give people the information they want, they won't come back. Look at the Google homepage — it's not at all exciting — and yet millions of people go there every day because it gives them the information they need.Website structure and navigation
It's so tempting to create a Home Page and then start to colour everything in sight, with different fonts and all sorts of gimmicks. What you actually need to do is step away from your computer, take some sheets of paper, and work out what pages you want and how they should be linked together. Of course this design will probably change as you go along, but if you have a design you'll find the whole process much quicker. By all means sketch the layout and even indicate colours if you must, but implementing that will come later — the structure comes first. Some websites have confusing navigation — all sorts of pages link to other pages, but you don't understand the structure, you feel there might be whole sections you've never seen, and half the time you don't know how you got to the page you're on or how to get back to where you were earlier. It's worth taking the time to do this step properly. To use an analogy, in interior decorating most of the time is spent in preparing the surface, removing the old layers, filling in the cracks… It's not very exciting, and of course you'd rather get on with the creative bit of painting or whatever, but if you don't do the preparation properly you're never going to achieve a really good result. 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
The basic language behind web pages since the world-wide web began is HTML — Hypertext Markup Language. You'll hear people saying it's out of date and should be replaced, but it's here to stay. It has a (fairly) logical structure, which you need to understand. Programs like Dreamweaver can insulate you from all this, but that means when things don't work you haven't a clue what to do.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 IS the internet; it doesn't occur to them that there's any other way of getting to the web, and Microsoft are very happy for them to continue in that belief. (Yes I know IE has now been replaced by The Edge, but I'm not going to update all my notes.) In fact there are many other browsers. I have Firefox, Opera and Google Chrome on my PC (all of which are free to download) — I used to have Netscape but that's no longer supported. If you're on an Apple Mac, a Unix machine or a hand-held device you probably use something different. If you're on CompuServe or AOL, they have the browser built into their own software, and AOL certainly used to make it difficult if not impossible to use anything else.
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 — especially IE. 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 IE 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>Hellobut don't ask me to debug it!
world!</Body></HTML>
Spacing
Normally a browser displays several spaces as one space, and a line-break as one space, so there's no point trying to use these to format your text. But there are other ways. 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 4UDBut it can also be used to give several blank spaces:10 Cross Street, Letchworth, Herts, SG6 4UD Telephone: 01462 678340I'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 Web menu has an Add nbsp 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>
First website
This is my first website.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.
Comments
A comment (“rem” to BASIC programmers) is something which appears in the HTML but is not displayed by the browser. I tend not to use comments because they take up space in the web page and slow down the loading when people view your pages. But you could argue that it's very small overhead.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 colinhume.com/buildmac.htm — if you're a PC user, read on.
WebEdit
I'm not here to promote my own software, but I want to tell you about a program I've written called WebEdit. I wrote it because I wanted something to reformat my HTML in a standard way, and do various other jobs for me, and it gradually got bigger and more powerful. I put in some error-checking, mainly for things which I tend to do wrong myself! Later I realised that I could also use it to upload and download files to and from the server, and do useful things like checking whether the version on the server was newer than the version on my local machine and offering to download it if it was. I put this in because one of my clients was very fond of tinkering with the web pages, and then complained because I had overwritten his changes.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 does), 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.
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 [Backspace] 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, just as CompuServe does). 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!
Homework for this session: Create a Home page and at least two other web pages. I know I haven't told you how to create a menu or link them together in any way, but you can only take in so much in one session! Remember that Content is more important than Layout, so get several paragraphs of text into each of your pages, using bold and italic as you feel necessary, and later you can worry about how to make it look pretty. Remember to contact me if you have any problems. I suggest you print out the source of your pages (not the pages as rendered by your browser) and bring them in next time so that I can see how you've getting on. If you also bring them in on a memory stick or CD, I should have time to load them onto the lap-top and see how they look in a browser. Memory stick is better because it's writeable, so if I do some changes you can take them away with you.