Main -> links -> guide to html [sitemap]



HTML the easy way
- how to write a webpage -
Created 17 May 1999 ... Updated 20 April 2000

Contents

Where to start

HTML is actually really easy, I always use the notepad editor for the best results as it will give you small files and you can easily edit them. In order to see what you get you first type the file in your notepad editor and save it to disk. You can then open Internet Explorer or Netscape and open the file, you don't have to be connected to the internet. Note that everytime you make a change in your Notepad file, you will have to reload (or refresh) the page in Explorer or NetScape to get the updates.

This page will give you just a bit of insight in the process of creating webpages. The best way to learn however is to look at the sourcecode for a page, do this by going to View-Source in Explorer or Edit-View Source in Netscape.

One important tip before you start: keep it simple. The more pictures and moving things you use the longer the ned user has to wait before he can see the complete page. Also not every option can be used by every browser. Everyone seems to concentrate only at IE and NetScape and I have to agree, they can do great things but there are users with other systems out there so try to bear them in mind too.

Okay, here we go....

The structure of an HTML file

The structure of an HTML file (Webpage) is as follows: 
<HTML>

<HEAD>
</HEAD>

<BODY>
</BODY>

</HTML>
As you can see, the file starts with the tag HTML. This will tell the browser that it's an HTML file. The next tag is HEAD, this will tell the browser that all the information regarding the page is stored there. This is for example the place where the Title (see in the window caption bar) is stored.

Note that the HEADer is started with the <HEAD> tag and stopped with the </HEAD> tag. This is the way it works for most tags, you use the tag itself to start and you use the /tag to stop. The BODY tag contains the page itself. See, again, how the </BODY> tag cancels the <BODY> tag. Of course you will also have to cancel the <HTML> tag so that's done in the last line.

What to put in the header

The most important information you can put in the header is:

What to put in the body

Well as said before, the body contains the actual page so whatever you want to share with other people you'll have to put in the body. The official rule is to put the actual text in paragraphs, you don't really have to, it will still work but in order to do it right....

Simple text and Fonts

Formatting and Layout
A block of text is informative but the layout makes it much nicer to read. So there are plenty of options in HTML to format text.

Tables
Tables are really important on Webpages. Making one looks difficult but they are pretty easy to build once you get the hang of it
You start and finish a a table with <table> </table>
Sometimes you want to have a header in the table to show what the column represents: <th> </th> note that it will automatically leave the left column open for the row descriptions.
Every row (horizontal) of the table will start and stop with <tr> </tr>
Every cel in a row will start and stop with <td> </td>
Example table: 

    <table> 

    <tr> 
    <td> item 1 </td>
    <td> item 2 </td>
    </tr> 

    <tr> 
    <td> item 3 </td>
    <td> item 4 </td>
    </tr> 

    </table>
Will look like
item 1 item 2
item 3 item 4

In order to get borders around the fields for easier reading, you can do this with <table border=1> try it yourself

Options for table cells include
align=left, center or right and of course anything you can do to text, even pictures are possible in a cell.

Hyperlinks
The nicest feature of HTML is hyperlinks. Hyperlinks is the reason the web really exists as the guy who started the idea was trying to get libraries linked together. This finally resulted in the Web.... A hyperlink has the form of <a></a> In between these you would normally put some text describing the link. examples are Note that in the second case you would add an anchor on a page like this: <a name="start"></a>

Images
Text alone won't sell so you'd better include some pictures as well. Do this via <img src="picture.jpg">
Yu can also add images as hyperlink, just put the <img> tag in between the <a></a> tags. Lots of picture control is possible, some options to put in between the brackets are

Maybe you've seen the moving gifs already and wondered how they've made it. It's quite simple actually. Someone made several pictures of different stages in the movement. These pictures were put into one GIF file and once the browser sees that it will swap the pictures after a certain time. The GIF file now appears to be moving. So it's not a cool trick in HTML...

More fun you can do with the body part
Between the brackets in the BODY tag you can put many options to change the appearance of the body.

Colour is always entered as RRGGBB, in hexidecimal digits. RR is for the Red value, GG is for the Green value, BB is for the blue value and it's somewhere between 00 and FF as it is hexadecimal. 00 means pure white, FF means pure black. To make it easier there are 16 standard colours: aqua, black(black), blue, fuchsia, gray, green, lime, maroon, navy(navy), olive, purple, red, silver, teal, white(white), or yellow So there are quite a few possibilities. Notice that not all users can see colours on their screens so be careful with what you choose.

Miscellaneous
Some other interesting tags are given below

Copyright of M. Koning 1999
return