A Short HTML Tutorial

[click here if you are familiar with computers and just want a quick-and-dirty html tutorial...]

First I suggest you go through the homepage so that you know what it looks like.

Then it can be a good idea to get your own copy of it. (on Unix you unzip it by simply writing unzip homepage.zip in your xterm window. I don't know how to unzip it on PC or Mac, if you do please tell me and I will add that information here).

Just to check that you are doing everything right you can then open the page in your browser (in Netscape you click this sequence of mouse clicks: File -> Open File and open the file called "index.html" in the "homepage" directory). Make sure it is your version of it that you are looking at and not the one on my homepage.

What software do I need to change the pages?

There are two types of programs that you can use to change an html document. They are both called "editors", plain-text editors and html editors. The difference is that in a plain-text editor you see the source code of the document while an html editor is a wysiwyg tool (wysiwyg = "What You See Is What You Get", even if a better name would be "what you see is almost what you get") that lets you add a picture by pushing a picture button, add a link by pushing a link button etc. Another difference is that an html editor is a program that you will have to buy/download and install on your computer while a plain-text editor can be found in any computer, it's part of the most basic equipment that all computers have.

Please note: a word processor, such as Word, is not a plain-text editor!

I suggest that you use a plain-text editor even though this may at first seem to be the most difficult way to do it. The reason is that I have met several people who have used html editors and failed miserably because the html editors don't always work the way you want them to (if you add something to a document the editor adds something to the document, if you later remove that thing from the document the editor might not remove all of what it earlier added. The result is garbage code that can cause trouble in the future). There is no reason to use html editors anyway since html is very easy to learn! :-)

Editors: any plain-text editor will do. A couple of suitable editors for Unix are emacs and pico. On a PC you can use Notepad or edit (in DOS). (I don't know the names of any suitable editors for Mac, if you know any please tell me and I will add that information here).

The directory structure

(directories are also called "folders". Same thing, just a different name)

I have chosen to make a good directory structure on this small page right from the start. This may seem unnecessary at first, especially if you look at how few files there are in the page, but it will save you lots of work in the future.

This is what it looks like:

First there is the file called index.html. This is the homepage. This special file name has some "magic" properties and should always have this name (shortened to index.htm on some computers).

Then there are two directories, docs (short for "documents") and pics (short for "pictures"). In docs I have placed all documents except the homepage document index.html, which has to be in the "homepage" directory (which can have a different name once you get it out on the web), and in pics I have placed all the pictures (divided into suitable categories in two more subdirectories). When your homepage grows you might want to use a different structure that you feel makes more sense for the particular contents that you have on it then but I suggest that you keep it this way for a little while until you get the hang of how this works.

The documents in the kit

(this would be a good time to open the file index.html in your plain-text editor)

The documents index.html (the homepage), friends.html and links.html are all lists of links with clickable images. The document me.html consists of a picture (you should of course remove the monkey and insert one of yourself there. How to get your photo into the computer is not part of this tutorial, one way includes a paper picture and a scanner...) and a few lines of text about yourself.

When you look at the source code you will notice that all four documents consist of three main parts, a beginning, a middle and an end part. I have added some space between these parts so that they will be easy to recognise.

(You can also take a look at these coloured illustrations of the source code of the pages index.html, me.html and friends.html, where I have highlighted and coloured the parts you should concentrate on)

The beginning part

This part sets the "look" for the page. It says what colours to use in the background, text and on the links. It also shows a logo. This part should be identical on all pages on a homepage (you can have lots of pages that all look different but that will only confuse your visitors).

In index.html the beginning part looks like this:

<HTML>
<HEAD>
<TITLE>My homepage</TITLE>
<BODY  TEXT="#000000" LINK="#0000ff" VLINK="#330099" BGCOLOR = "#ffffff">
<IMG SRC = "pics/misc/logo.gif" WIDTH = 463 HEIGHT = 70 alt = "My homepage">
<P>

To begin with you can leave this part alone, except for the highlighted words "My homepage", which you can change to something you like better. I might change it to "Veronica's homepage", like this:

<HTML>
<HEAD>
<TITLE>Veronica's homepage</TITLE>
<BODY  TEXT="#000000" LINK="#0000ff" VLINK="#330099" BGCOLOR = "#ffffff">
<IMG SRC = "pics/misc/logo.gif" WIDTH = 463 HEIGHT = 70 alt = "Veronica's homepage">
<P>

When you start feeling confident and comfortable with html you can also change the colours, but save that for now (I once wrote a little essay to explain how to use colours in html, read it when you feel ready for that).

The part that begins with IMG SRC is the logo picture (the one that says "Welcome to my homepage"). This is the part you should change when you have made a new logo that is special for your homepage, but maybe you should save that part for a while.

If you look at the beginning part of one of the other html documents you will find that it looks like this:

<HTML>
<HEAD>
<TITLE>About me</TITLE>
<BODY  TEXT="#000000" LINK="#0000ff" VLINK="#330099" BGCOLOR = "#ffffff">
<IMG SRC = "../pics/misc/logo.gif" WIDTH = 463 HEIGHT = 70 alt = "">
<P>

In other words it looks exactly the same as the beginning part of index.html except for the title (for obvious reasons) and the characters ../ at the beginning of the "address" to the logo picture (and except for the part between the quotes in the alt part of the img tag, more about that at the end of this tutorial).

(It could be a good idea to take a second to think about what this ../ might mean before you go on and read about it)

The reason for this is that the two documents are in two different directories in the directory structure (look at the picture). To "get to" the image logo.gif from the document index.html you have to pass the two directories pics and misc (in that order), that is why you get the "address" "pics/misc/logo.gif".

This way of adding the directory names with / characters between only works when you move down in the structure. When you want to move up in the structure you write .. instead of a directory name. The two dots simply means "the directory above this one" (or "the parent directory". Any file or directory can only have one parent directory, that's why you can always call the parent ..). Then you just add the / character to separate the directory "names".

To get to the image logo.gif from the document me.html you have to first go up one step in the structure and then down through pics and misc. That is why you get the "address" "../pics/misc/logo.gif".

(PC people: Please note which way the / character leans. It is the opposite to what you are used to. The correct way to write is "pics/misc/logo.gif", not "~~pics\misc\logo.gif~~"!)

The middle part

In index.html, friends.html and links.html the middle part consists of a list of links with buttons on them, like this one to the document me.html:

About me

In the homepage this link looks like this:

<P><a href = "docs/me.html">
   <img src = "pics/icons/roadkill.gif" border = 0 WIDTH = 40 HEIGHT = 40 alt = "">
   About me
   </a>

where docs/me.html is where you will end up if you click on the link, pics/icons/roadkill.gif is the picture and About me is the text next to the picture.

This is very easy to copy and change into some other link. This is what it would look like if I put a link to Alta Vista from the homepage:

<P><a href = "http://www.altavista.digital.com/cgi-bin/query?pg=q%26what=web">
   <img src = "pics/icons/links.gif" border = 0 WIDTH = 40 HEIGHT = 40 alt = "">
   Alta Vista
   </a>

That link would look like this:

Alta Vista

Note that it is only the highlighted text that has changed, the white part is exactly the same in both links.

If I were to use a different picture in the first link I would probably have to change the WIDTH and HEIGHT parts of the link as well. Like this:

<P><a href = "docs/me.html">
   <img src = "pics/misc/me.gif" border = 0 WIDTH = 320 HEIGHT = 240 alt = "">
   About me
   </a>

Which will give this result:

About me

There are different ways to find out how big a picture is. One way is to click on it with the right mouse button in Netscape and choose "Open this Image" in the menu that pops up. Then you can read at the very top of the window (the same place where you read the title of an html document) how big the picture is. The first number is the width and the second is the height (in the case of the monkey it would say 320x240 as you can see in this example).

Now you can make more links in the same way by just copying the code for a link with a picture and changing the parts that were highlighted in the examples above.

When you make a page like me.html that consists of text and maybe a picture or two the middle part of that page consists of titles:

<H1>Some words about me</H1>

pictures:

<IMG SRC = "../pics/misc/me.gif" WIDTH = 320 HEIGHT = 240 alt = "">

and text. When you want to write a new paragraph you have to write <P>. Just leaving some space in the source code doesn't work.

The end part

In index.html the end part looks like this:

<P><HR>
Send comments to
<a href = "mailto:me@site.country">me@site.country</a>
</BODY>
</HTML>

Here you should change me@site.country to your own email address.

In my case the code would then be:

<P><HR>
Send comments to
<a href = "mailto:e93-vkn@sm.luth.se">e93-vkn@sm.luth.se</a>
</BODY>
</HTML>

The end part on all the other pages looks like this:

<P><HR>
<A HREF = "../index.html">
   <IMG SRC = "../pics/icons/home.gif" BORDER = 0 WIDTH = 40 HEIGHT = 40 alt = "">
   Back to my homepage
   </a>
<BR>Send comments to
<a href = "mailto:me@site.country">me@site.country</a>
</BODY>
</HTML>

The only thing you should change here is the email address. You should have this same end part on all pages you make!

What to change

Ok, that was a lot of new things at once. Take a look at these illustrations to see again what parts to change in the documents index.html, me.html and friends.html where I have pointed out good parts to change.

A couple of excercises

Excercise 1

To make it your homepage.

Write some sensible text on the page "about me".

Change the image to somehting else, a self portrait or a photo of yourself, if you have one in the computer already (otherwise save that until later).

Excercise 2

To get you started on writing some pages of your own.

Make a presentation of a picture collection (for example on the subject "cats").

Make a subdirectory to the pics directory called cats.
Make a new document in the docs directory. You can call it catpictures.html. Start out by copying the beginning and end parts from one of the other documents in the docs directory (remember to change the title to "Some Pictures of Cats").
Copy some pictures of cats from the net and place them in the cats directory.
Write the document. Use the <P> tag to make new paragraphs, the <H1>text</H1> tag to make headlines and write <IMG SRC = "../pics/cats/imagename.gif" WIDTH = 123 HEIGHT = 456 alt = "[Description of image]"> to get the images to show (remember to put in the correct image size). Also write some ordinairy text to describe the pictures.
Make an icon for the link to the page by taking your blank button into a paint program and paste or draw a picture of a cat on it (and save it as cat.gif in the icons directory).
Here is the blank button and some suitable small cat icons:
Add a link to the page on the homepage by copying the code for one of the links you already have there and changing the "address" to the document to docs/catpictures.html and the "address" to the icon to pics/icons/cat.gif.
Check that your new page looks good in your browser.

Some variations on the layout of the homepage

Black

Yellow

Soft

Soft2

Extreme1

Grey

Download the variations as a zip file (95k)

How can I learn more about html?

You can see how others have made their homepages by looking at their source code. It is possible to look at the source code of any html document on the net by clicking View -> Document Source in Netscape.

You can also read a more detailed html guide. There are plenty of those on the net so I see no reason to write one. I will make a second example page with more advanced html but it will not have a tutorial, it will assume that you know enough to figure out for yourself how things work.

How do I get the pages out on the net?

Unfortunately I can't answer this question. The reason is that this is different for different people. My suggestion is that you ask your Internet Service Provider (ISP).

What you should get is a directory where you can put subdirectories and files. On some computers you will also need to use the file extension htm instead of html, this is also something that you will have to ask your ISP about.

This is especially important for the filename index.html.

A couple of things you should know about file names

Remember that file.html, File.html and FILE.HTML are seen as three completely different names by many computers. Of the three it is recommended to use the name file.html since using capital letters is a computer equivalent to screaming and considered very rude.

You should also always give the proper extensions to all your files or many browsers will not touch them. A gif image must be called filename.gif, an html document must be called filename.html (or filename.htm) or all you will get is an error message or a question if you want to download the file (well, yes, you do want to "download" the file, but not that way...).

Some special rules apply to the filename index.html or index.htm of which one has the "magic" property that it "hides" the files in a directory and the other will just be an html document which is not different from any other document (my guess is that if you can name your index file index.html in the homepage directory on the net - not in your own computer - the magic name is index.html). (some servers use other such "magic names" but the principle is still the same, and the name "index.html" is the most common one)

Never use weird characters in file names!!! Letters (a to z), numbers (0 to 9), points (.), underlines (_) and some other characters are ok. Other charachters such as space characters, national characters (for example åäö in Swedish) just may not work on some computers, with the result that people who have those kinds of computers won't be able to see your page.

A couple of things you should know about "netiquette"

[this section is under construction!]