Course HTML

 

Lesson 1

These days anybody can easily design a website in Frontpage or another random HTML-editor without any basic knowledge about the HTML-code. Nevertheless I should advice you all to learn the basical principles of HTML. Step by step I will explain how this programming works.

To write the code you can use an ordinairy text-editor like Notepad or Wordpad, but I prefer the program Textpad. The program is suitable for multiple programming-languages and has many possibilities.

You can download this course for Windows or Unix.


The codes I will call 'tags' from now on, are always among the < and > sign. With these tags you tell the browser (for example Explorer or netscape) how to act. This course is based on Explorer, but most applications will work in Netscape as well.

With the first and last tag you tell the browser in which language you write the document. Among we use the <HEAD> tags followed by the <TITLE> tags.

With these ones you give the document its name, which will appear in the blue bar in top of your browser.

<HTML>
<HEAD>
<TITLE> My first homepage </TITLE>
</HEAD>
</HTML>


Most of the site will come among the <BODY> tags.

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>

</HTML>


Sometimes tags such as the <BODY> contain values in which you have the possibility to define more options, so you can change the defaults. For example I will show you how to define the background colour and add a background sound to it.

<BODY BGCOLOR="red" BGSOUND SRC="C:\My documents\song.mp3">

If you want to make use of other colours then the default ones you need hexa-decimal codes which you have to remember. For default red this is the code.

<BODY BGCOLOR="#FFOOOO">

Look here for a colour scheme.


At the moment we've got an empty page with a nice colour, but there's something missing. Don't you think so? Let's add a textline. For this we use the <FONT> tag. This one has to come among the <BODY> tags. I will release everything among the <BODY> tags from now on to keep it evident.

<FONT>
Here an ordinairy textline
</FONT>

If you should see how this appears in your browser you would see that the browser uses a default font-type, size and colour. We can use some values here too.


First we choose the font-type. Let's take 'Helvetica'.

<FONT FACE=Helvetica>
Here an ordinairy textline
</FONT>

Now we define the size: the browser knows 7 sizes.
in this example we use size 6.

<FONT FACE=Helvetica SIZE=6>
Here an ordinairy textline
</FONT>

And the colour.

<FONT FACE=Helvetica SIZE=6 COLOR="YELLOW">
Here an ordinairy textline
</FONT>


We can make text bold.

<B> <FONT>
Here an ordinairy textline
</FONT> </B>

or Italic.

<I> <FONT>
Here an ordinairy textline
</FONT> </I>

We can underline the textline.

<U> <FONT>
Here an ordinairy textline
</FONT> </U>

Or all together..

<B> <I> <U> <FONT>
Here an ordinairy textline
</FONT> </U> </I> </B>