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.mozilla.org/en-US/docs/Learn/Front-end_web_developer though I don't agree with all their recommendations!
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'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?
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 18.104.22.168, 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.
Some people will immediately say, “No, you don't need all of that”. In fact you could have a web page which just consisted of
Hello 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!
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 as
10 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.
This is my first website.
<p>Aren't you impressed?
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.
<p><b>Aren't you <i>impressed?</i></b>
Aren't you impressed?
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
If you're an Apple Mac user, have a look at colinhume.com/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 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!