Welcome to this tutorial on HTML web-programming. HTML is most likely
one of the easiest "programming" languages to learn, but it has ALOT of
limitations. To create a html file, all you need is the notepad, that
comes with Windows, or any other Texteditor, that Does NOT have functions
like bold or tables etc... these will not create plain text files, that
we want, when creating html pages. html uses so called tags, to defin
what it does at certain locations. tags start with "<" and end with
">". At the beginning of each html file you will need following code:
<HTML>
This defines, that we are creating an html file. save the file as: "file.htm"
or "file.html" , there is no real difference. When you want to indicate
that the explorer should stop a certain command (tag), then you put a "/"
infront of the tag, for example:
<HTML>
</HTML>
This indicates that we have reached the end of our html file. Now, the
html file has 2 parts, the head and the body. The head defines how the
web page looks like, and in the body you got all the other stuff, like
pictures. The head isn't always needed, but it can be useful. Let's start
with the title of our webpage:
<HEAD>
<TITLE> Web-Page Title </TITLE>
</HEAD>
of course all this tags go between <HTML> and </HTML>. The
title will be displayd over the toolbar, at the top of the explorer.
We will now concentrate on our <BODY>. As i mentioned earlier
in the body we got all the text and pictures. Let's start with a simple
thing, displaying text:
<BODY>
Hello all
</BODY>
This comes, logically, after the head. If you want to display text on you
web page, you just have to type it. Text doesn't need tags to indicate
where it starts. Altough when coloring or changing the font of the text
we will need tags again ;). To change color and/or font all we need is
the <FONT> tag, which we place infront of the text which we want
to change. The </FONT> tag goes after the the text you want to change
;). For Example:
<FONT FACE="ARIAL" SIZE=2>hello</FONT> all of you
Only the word "hello" would have changed it's size and face. "all of you"
would be the same as the rest of the text. There are other commands you
can add to the font Tag, like color:
<FONT COLOR="red">WOW</FONT>
This would change the color to red. instead of "red" you could also write
"FF0000", but using words is simpler ;). Now that you know how to create
and manipulate text a bit, we want to change the backcolor of our webpage.
To do this, we just add " BGCOLOR="blue" " to our BODY tag, like this:
<BODY BGCOLOR="blue">
Simple eh? Now let's add some pictures to our Page. Adding pictures
is very simple, just type:
<IMG SRC="pic.jpg">
As you might have noticed, the IMG tag doesn't need a </IMG> tag
to show where it ends. SRC describes where the picture is located. If
you just type the name of the picture, the explorer will look in the
same folder as the html file for the picture. To take a picture that is
in a other folder, you could just type the whole path, or if it is in a
subfolder of you currrent folder, you can just type: "folder/pic.jpg"
where "folder" is you folders name, and "pic.jpg" is the image file.
The Image will be inserted directly where you put the <IMG> tag.
Before i continue with pictures, i want to show you some other things
you can do with text. When writing text, and hitting the return key,
you might think that the text on the html file will continue in the
next line, well, this doesn't work. to jump to the next line, you
just have to type <BR>.
Back to our images. If you want your image to have a border, you just
add BORDER to you <IMG> tag. For example:
<IMG SRC="to.bmp" BORDER=10>
This would create an image with a border of 10. If you want a text to
appear when the image couldn't be loaded, or the person viewing your
page disabled pictures in his webbrowser, just add ALT to you IMG tag
<IMG SRC="lol.gif" ALT="A funny picture">
Now, if the picture couldn't be loaded, a text instead of the picture
would appear, with the contents: "A funny picture". Now, you got the
picture on you page, and text, but you want the text to appear on the
left side of the picture. To do this, add ALIGN to the IMG tag. ALIGN=left
makes the image appear on the left, and the text on the right. ALIGN=Right
will make the image appear on the right, and the text on the left ;).
Example:
<IMG SRC="apple.bmp" ALIGN=left>This is the apple of Addam and Eve.
The snake gave it to them.
The bible is a funny thing.
I have added another tag, the BR tag with a CLEAR command. This tag makes
the rest of the text continue under the image, and no longer right of
the image. Now you've got what you wanted, but you think, that the text
is a bit to near to the image, just add HSPACE (for horizontal space)
or VSPACE (for vertical space) to your IMG tag. For Example:
<IMG SRC="car.jpg" ALIGN=left VSPACE=5>This is the new BMW
This would create a space between the text and the image. If you want
you text or image to appear in the center of the browser, you just put
<CENTER> tag infront of the image and/or text.
<CENTER>
WELCOME TO MY WEBPAGE<BR>
<IMG SRC="welcome.jpg">
</CENTER>
Here you can find all sorts of stuff...
This would make "WELCOME TO MY WEBPAGE" and the image appear in the
center of the page, and the rest of the text would be normal.
Now, if you want to use a certain picture as a background, we have to
modify our BODY tag again.
<BODY BACKGROUND="bubles.jpg">
This would use the picture bubbles as a background image.
Now you know how to add Text and Images to your page, so i want to
show you how to make links to other pages. Also very simple. Let's
first look at some code, then i'll explain it ;).
<A HREF="www.hotmail.com">Hotmail</A>
This is nothing more than a link to Hotmail :). Between <A> and </A>
you can either use a image and/or a text. All that is between these 2 tags
is a link. HREF defines the address you want to link to. Simple eh?
NEXT>>