Menu
-Main
Tutorials & Snippets
-Beginner's HTML Tutorial
Links
-StormVideogames.Com
|
HTML Tutorial
-Introduction
-How to assign text and background colors
-How to make links
-How to load images and embed multimedia
-How to use fonts and align objects
-How to create tables
-How to use frames
-Ten questions and answers
Introduction
Welcome to the HTML Tutorial Page. This page will basically teach you how to program HTML, or
if you know it, it may perhaps show you some tricks you might not know. HTML stands for
Hypertext Markup Language, and is used mainly to program web pages (like this very one).
Is special software needed to program HTML web pages?
Well, a number of different softwares are out there in the market that lets you program HTML.
Some are more complete than others. Even so, they might not eventually be enough to program a
sophisticated web page. So I will answer the main question, no, no special software is needed to
program HTML, just Notepad! (Mac users should be able to use Simple Text). However, there are a few
details to know before you can use any of these. First off, open up Notepad and type in the following:
<HTML>
<HEAD>
<TITLE>Your web page title</TITLE>
</HEAD>
<BODY>
Hello World!
</BODY>
</HTML>
|
Now, choose save the file as hello.html Please notice that you can't miss putting that .html at the
end of the name because that is what defines an HTML file. Once saved, open your browser and take
a look at your page. The output should be something like this:
Hello World!
If you have closed Notepad but want to do further editing of your page, open Notepad again, choose
File | Open and on File Types choose "All files". Now look for the one you want and double click it and
it should be ready for further editing. (Mac users might drag the file on Simple Text's icon or try
to get it from Simple Text's Open command.)
OK, let me now explain how this file goes. The <HTML> must be always be in a web page, this is what
allow thebrowsers to know it is HTML indeed. Anyways, always use <HTML> Next is <HEAD>, which
defines the head of the file, such as titles and the such. Then <HEAD> closes, and comes <BODY> ,
which must also be on all web pages you do. Hello World! is normal text, it is between <BODY> and </BODY>
and it is not inside a <> so it will show to the screen. Now, you might have noticed that most, if not all tags in here
(for example, <HTML> is a tag) are paired with another that starts with a "/". The one with the "/" closes the specific tag
and it is no longer in effect after that.
Text and background colors
Well, lets get a bit more sophisticated, lets now define the text and background color as well as the links colors. This is
the same HTML that you just copied, so only add the new stuff. The new stuff are in bold.
<HTML>
<HEAD>
<TITLE>Your web page title</TITLE>
</HEAD>
<BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#000080" ALINK="#000080" VLINK="#800080">
Hello World!<BR>
Hello World once again!<BR>
And Hello World even again!<BR>
</BODY>
</HTML>
|
OK. These are attributes of the <BODY> tag. TEXT will define default text color in page, BGCOLOR will
define default background color in page, LINK will define of which color links will be, ALINK will define
which color to turn to temporarily when you click on a link (to give the effect of a flash), and VLINK defines
which color links you have already visited will be. All of these attributes are optional, but highly
recommended to ensure that most browsers will render the page the same or in a similar way. It is possible that
when you view this new HTML you just did perhaps you won't notice any changes, or maybe will. Anyways,
it is always good to set the <BODY> attributes to something to ensure that most browsers will render the page in quite the same way.
Also, you will notice that all of these attributes are set equal to an hexadecimal number. That number defines the color.
These colors are defined as follows: "#RRGGBB" So the first two letters are for the red color, the middle two for the green color
and the last two for the blue color. 0 in hexadecimal is 0, 128 in hexadecimal is 80, and 255 in hexadecimal is FF.
Lets look at some colors here:
|
#000000
|
#FFFFFF
|
#800000
|
#008000
|
#000080
|
#FF0000
|
#00FF00
|
#0000FF
|
#FFFF00
|
#FF00FF
|
#00FFFF
|
Well, there I displayed you a list of just a few color combinations you can do in HTML.
Everything that needs to set a color in HTML will equal to such an hexadecimal number.
Some browsers understand color names, such as red, green, blue, etc,
although I don't personally recommend using these yet since they aren't supported by a large
number of browsers, and may cause many visitors to look at your site very poorly. Well, anyways,
it is up to you.
The <BR> tag has the task to take the cursor to the next line. It equals to a carriage return.
How to make links
Now we will talk about links. What is a link? Most web users already know it, directly or
indirectly, but to make sure there are no holes left, I will say what a link is. A link is
a word or series of words you can click on that will generally take you to another page. Hmmm...
Seems familiar now? Well, lets do an example:
With Notepad (or wathever), create a file called pagea.html and add the following code to it:
<HTML>
<HEAD>
<TITLE>Page A</TITLE>
</HEAD>
<BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#000080" ALINK="#000080" VLINK="#800080">
Welcome to page A! This web page demonstrates how to add links. They are real easy!<BR>
<BR>
<A HREF="pageb.html">Link to Page B</A>
</BODY>
</HTML>
|
Now make the file pageb.html with this code:
<HTML>
<HEAD>
<TITLE>Page B</TITLE>
</HEAD>
<BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#000080" ALINK="#000080" VLINK="#800080">
Welcome to page B! This web page demonstrates how to add links. They are real easy!<BR>
<BR>
<A HREF="pagea.html">Link to Page A</A>
</BODY>
</HTML>
|
Well, first off, we just did two web pages. Why? To make both of them to link to the other. A clever
programmer will find out how all of this works perfectly with no problems. What defines a link
is the <A> tag. The <A> tag has an attribute here, HREF. HREF equals the filename you intend
to load. This is case sensitive. Then you see the respective link text, which were "Link to Page A" and
"Link to Page B", respectively. Then comes </A>, indicating that this link is not affecting any further
text or graphics. There is more related to links but this is basically it.
Lets now have a quick talk about another type of links also commonly found throught the web. This
type of link I will talk about, rather than jumping to a different page, it jumps to a different
place on the very same page the link is on. This is used a lot on pages that have large contents
to find specific topics very quickly without having to scroll through the whole thing. This very same
page uses this type of links. Well, lets see some example code!
Hello, user!<BR>
<BR>
Click <A HREF="#END">here</A> to see the end of this HTML page.<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>
<A NAME="END"></A>Here you are :-)<BR>
<BR>
|
OK, the previous example puts a link on screen that will take the user to the end of the HTML page.
Please notice that the HREF attribute in the first <A> tag points to "#END", and that in the
second <A> tag NAME is set to "END". That is what makes the user travel from the link to the
bottom of the page, as the second <A> tag is in the bottom of the page. The # in the HREF
attribute in the first <A> tag is what tells the browser that "END" is not a file, but a
link that leads to another place inside the same page. This is also known as an anchor.
How to load images and embed multimedia
Well, I think you should be going OK with links as of what I said here already. Now lets see something
fun. How to load images and embed videos and sounds!!! Lets start with the images which are easy to
load in HTML (is not that embedding videos and sounds is hard, but well, I have to start somewhere,
right? :-) ) OK, once again, lets get our hands into HTML, here it goes:
<HTML>
<HEAD>
<TITLE>Loading Images</TITLE>
</HEAD>
<BODY>
Normally, images on The Internet are in either .GIF or .JPG (JPEG) formats. The one I am
going to load next iscalled animage.gif <BR><BR>
<IMG SRC="animage.gif">
<IMG SRC="animage.gif" ALT="This is an example image." WIDTH="26" HEIGHT="28">
<BR>
<BR>
</BODY>
</HTML>
|
Well, that loaded two images, both were the same image. See the line where it says
<IMG SRC="animage.gif">? Well, basically, thats all you need to load an image. The
IMG attribute is what makes the browser understand that it is about to load an image. The
SRC attribute is the filename of the image. Again, this is case sensitive! After that, you
see another line, <IMG SRC="animage.gif" ALT="This is an example image." WIDTH="26" HEIGHT="28"> ,
well, this one also loads the image as before, but as you can see it has some more attributes,
ALT points to some text to be displayed in case the image can't load or while it is loading. Also,
if the visitor puts the mouse on it, that text will pop-up over the image. The WIDTH and HEIGHT attributes,
obviously, defines the image's width and height, respectively. I specified a width of 26 pixels and
a heigth of 28 pixels (which is the image's current size). You may also enter different values which will
cause the image to be resized. By the way, the image I used isn't a great thing
(  ), but I think it works
for the purpose of teaching :-)
OK, now, lets go with embedding, and lets jump off rigth into HTML:
<HTML>
<HEAD>
<TITLE>Embedding</TITLE>
</HEAD>
<BODY>
<EMBED SRC="tone.wav" WIDTH="144" HEIGHT="60" HIDDEN="false" AUTOSTART="false" LOOP="false">
</BODY>
</HTML>
|
OK, thats all to embedding something. Here I embedded sound "tone.wav" In reality, to embed something, you only need to put
<EMBED SRC="filename"> However, since I like to get people confused, I used a more
complete syntax ;-) Well, the EMBED attribute tells the browser that it is about to embed
something (such as a sound or video file). The SRC works in the same way it does with images; it
specifies the file to embed. WIDTH and HEIGHT, on some browsers, alter the display of the controls,
HIDDEN tells browser if controls are hidden or not. "false" means it is not hidden, to hide it,
specify "true". AUTOSTART tells if sound or video will play as soon as page is loaded or if rather to
wait until the user plays the sound or video from the controls. LOOP tells the browser to (or not to)
loop the sound. Specify "true" if you want sound or video played repeatedly. Now, this is the result
from the above HTML:
|
