Profsr Home


Tutorials Area


Lesson 1

Lesson 2
The Stylesheet

Lesson 3
Basic Tags

Lesson 4

Lesson 5

Lesson 6
Simple HTML Tutorial


Why use HTML?

HTML stands for HyperText Markup Language. The language is used to markup a text file (put special codes in it) so that all browsers can read it over the Internet.

There are many ways to code HTML:
  • you can write the text and manually insert all the codes yourself using a text editor like Notepad, for example; that is not too bad if you have a small quantity of text to write and not a lot of formatting to do.

  • you can use an HTML editor; that's like a text editor but with the HTML codes built-in; you write the text and then format it with the HTML codes supplied using buttons or tabs.

  • you write the text with a word processor, MS-Word or Wordperfect, for example, and you save the file in HTML format; the result may not be perfect but it usually isn't too bad; it will be long, however; what you can write and format in 10 lines, Word will convert to 100.

  • you use a WYSIWYG editor, like FrontPage, where you draw the page and it creates the code for you.

HTML is not difficult. It's not rocket science and it's not programming. There are no complicated structures like IF ... THEN ... ELSE in HTML. If you're the slightest bit handy with the keyboard and a bit artistic, you can create a decent web page in HTML.

So, in this tutorial you will learn the basic stuff you need to know to create your own HTML pages. You will find it much more flexible and powerful than a page created by FrontPage or Word.

Get the right tools

Step one: get a decent HTML editor. That's a program that helps you write the HTML code with prompts and menus and buttons. It usually does things in color, it can open multiple files, allow you to do search and replace of text, etc.

I recommend Arachnophilia. It's free! It has lots of powerful functions to do everything you will ever need to do in HTML. It really is one of the best tools I've seen in a long time. Installation is straightforward and you'll be ready to start coding.


Step two: find some decent graphics that you will need. If you intend to use a special background and a logo and pictures, download them into a separate directory on your disk.


I've mentionned this one several times in other places but I'll repeat in case you missed it.

If you are used to working in Windows, you know that file names, folder names, etc. are not case-sensitive. UPPERCASE or lowercase doesn't really matter.

But most Internet servers work in UNIX, not Windows. And in UNIX all those file names are case-sensitive. My "Pictures" directory will not be found if I write it as "pictures". This does not apply to the actual HTML code - just to the file structure on the server.

So, a word of advice: write everything (files, folders, paths) in lowercase. For example, when I need to get a picture, I will write the code as: "../images/pic1.gif" and so on.

Here are a couple of good sources for graphics:

If you need more, just type: free web page graphics in your favorite search engine.

Make a plan

Take a piece of paper and draw a free-hand sketch, a layout, of what the page will look like. It could look something like this:

Your layout may be a bit, or a lot, neater than mine but it doesn't have to be. Let me correct that. It doesn't really have to be if you're working for yourself. If it happens that you are preparing a layout for a client, I would suggest that you make it a lot neater and more professional.

Decide how the page is going to be split-up - how many columns and rows. That will become more obvious when we look at tables later.

Select the graphics you want to use. Decide on alignment - center, left, right? Specify if alignment refers to colum borders or page borders.

Choose the fonts you will use for text. Face, size, color and alignment of different headings, quotes and paragraphs.