The Dark Pages - HTML Tutorial

( http://etch.keenspace.com/darkpages/tutorials/html.html )

INTRODUCTION

Hello and welcome. This tutorial will teach you HTML, the language of the internet. Without further ado, let's get on to the further ado.

INTRODUCTION

HTML is the 'language' of the internet. When your web browser (netscape or internet explorer) looks at a web page, it really just copies one file from another computer onto yours, then opens it. The file will usually be an HTML file, but web browsers can also open graphics, raw text files, movies, sounds, etc. No matter what it is, the sequence is always the same. You tell the web browser what to open, it downloads (copies) it to your computer, and it opens it up for you to see. The thing to note about HTML is that it is just a file format. Like normal text, or a Microsoft Word document, or a jpeg image, or whatever. Your computer can open, save, edit, etc. HTML files just like you can open, save, edit, etc. MS Word documents. Once you learn HTML, it's pretty darn easy to write your own web pages from scratch. Let's learn how.

In your computer, open up notepad (click on the Start menu, then 'Programs', then 'Accessories', then 'Notepad'). Note: it's usually not a good idea to use programs like MS Word to edit html files. Type the following:

This is a web page.

Save it anywhere you want with the name "webpage.html". Open up the file. Congratulations. You have just made your first webpage.

Note: the box above is called a "table". In this tutorial, tables are used to separate HTML code and webpage results from the rest of the tutorial, hopefully making it easier to read. When you make a webpage, the tables will not appear. The stuff inside the tables will appear.

THE AND TAGS

HTML is very similar to normal text. In fact, it IS normal text. It just has some extra things that let you do stuff like adding images, making links to other pages, etc. Let's go ahead and learn those next.

Note: if you change an HTML file, you must save it with notepad and then reload/refresh it using netscape or internet explorer in order to see the changes. Just saving the file won't work. You have to reload it too.

HTML uses things called "tags" to do special stuff like adding images to webpages, and making links to other pages. All tags start with the "<" character and end with the ">" character. For example: there is an html tag called "BR" (short for 'line break'). If you wanted to use it in a webpage, you would type the following:

This is a webpage. I just used the BR tag.

Try that out to see what happens. It should look like this:

This is a webpage.
I just used the BR tag.

In HTML, the BR tag goes to the next line. Go ahead and try this HTML:

This is the first line.
This is the second line.

Surprise. When you view the webpage, both sentences are on the same line. In HTML, you have to explicitly make a new line using .

For example:

The HTML

One Two

would look like this in a webpage:

One
Two

and the HTML

One
Two

would look like this in a webpage:

One Two

and the HTML

One 
Two 
Three

would look like this in a webpage:

One
Two

Three

There are some HTML tags that have both a starting and an ending point. For example: the B tag makes text bold. You open the tag by typing "", and you close the tag by typing "". For example:

The HTML:

Normal text Bold Text

Would print "Normal text" in normal text, a space, then "Bold Text" in bold text.

Normal text Bold Text

Try it.

If you understand how to use the BR and B tags, you understand almost everything about HTML. There are more tags to learn, but once you understand BR and B, the rest are easy. Experiment with these two tags and DO NOT CONTINUE until you feel comfortable using them. An example is given below:

This is a list 
1.) First thing. 
2.) Second thing. 
3.) Third thing. 
4.) Bold thing. =]

Remember, do not continue until you feel comfortable using the B and BR tags. If the above HTML code does not make instant sense, it would be a good idea to practice more.

Note: HTML is not case sensitive. This means that you can type or or or whatever. The web browser won't care. HTML is traditionally written in uppercase, but it's usually easier to write and understand using lowercase.

THE TAG

The FONT tag can be used to affect the font of a chunk of text. For example, it can be used to change the color. Unlike the B tag, the FONT tag has a lot of options you can play around with.

Go ahead and try the following HTML:

testing

It didn't do anything, huh?

testing

Let's give it an option and see what happens. Try this:

testing

You should see the word in red.

testing

In this case, FONT is the tag, and "COLOR" is one of the options. Go ahead and play around with B, BR, and FONT.

Note: you must use the US spelling of color. "Colour" will not work.

Sample HTML:

Normal stuff. 
Bold stuff. 
Red stuff. 
Blue stuff. 
More Blue stuff. 
Green stuff. 
 
123

What it looks like:

Normal stuff.

Bold stuff.

Red stuff.

Blue stuff.

More Blue stuff.

Green stuff.

123

Note: if the web browser doesn't understand a tag, it ignores it without giving you a warning. If your tags aren't working right, double-check the spelling inside the tags.

Note: if you put a newline in the HTML file, web browsers will usually put a space there.

For example: the HTML file

a
b
c

would look like this in a web browser:

a b c

Note: it is possible to nest tags. For example: there's nothing wrong with doing this: "red bold text" . Or this: " Bold text bold red text bold text". Everything inside a tag will be affected by it, unless another tag overrides the outside one. For example: if you use the FONT tag to change the color to red, and then use another FONT tag to change the color to green, the color will be green. Inside tags override outside ones.

The HTML

Nested FONT tags.

looks like this:

Nested FONT tags.

If you truly understand the B, BR, and FONT tags at this point, all other HTML will be easy. Everything else is basically the same. Some tags are used alone like BR, the rest are used in pairs like B and FONT. Tags will usually have options, like FONT does. Play around with B, BR, and FONT until you feel comfortable using them. Do not continue until you feel comfortable using the options in FONT. Do not continue until you feel comfortable nesting tags.

THE <HTML>, <HEAD>, AND <BODY> TAGS

A webpage should always be inside the HTML tag. It's usually ok to leave this tag out, but this is considered to be bad coding and can cause problems.

A simple webpage will look like this in HTML:

<HTML>
This is a simple webpage. 
This is the next line. 
Yay.
</HTML>

Try this to get used to it.

Inside the HTML tag you are supposed to put a BODY tag. For example:

<HTML>
<BODY>
This is a simple webpage.
</BODY>
</HTML>

Try this.

The BODY tag has many options. For example: you can set the background color using the BGCOLOR option.

The following HTML has a green background:

<HTML>
<BODY BGCOLOR=GREEN>
I like green.
</BODY>
</HTML>

In a website, it would look like this:

I like green.

The BODY tag also has the TEXT option. This lets you set the color of the text in the webpage.

This HTML (when added to an existing webpage):

would make the webpage have a blue background with white text:

example

Try it.

Experiment with different colors to get used to this. Keep in mind that you have to repeat something about six times in order to remember it. That's just the way the human brain works.

Inside the HTML tag, you will frequently see the HEAD tag.

For example:

<HTML>
<HEAD>
</HEAD>
<BODY>
This is a simple webpage.
</BODY>
</HTML>

The area between the HEAD tags is called the "header". If you want to have a title for your webpage, you should use the TITLE tag in the header.

For example:

<HTML>
<HEAD>
<TITLE>This is the title</TITLE>
</HEAD>
<BODY>
This is a webpage with a title.
</BODY>
</HTML>

Try it.

Now change the title and change the background color and add some bold text.

Note: It may be possible to put the TITLE tag inside the BODY tag, but this is very very very bad coding, and people will laugh at you if you do this. Also, the title may not display properly, and may take a long time to display. Always put the TITLE tag inside the HEAD tag if you use it. Always put the HEAD and BODY tags inside the HTML tag. Always put the HEAD tag above the BODY tag. Always put the entire webpage (excluding title/etc) inside the BODY tag. It is ok to leave out the HEAD tag out if there is nothing inside it.

By now, it should be possible to understand the following web page:

<HTML>
<HEAD>
<TITLE>Storytime</TITLE>
</HEAD>
<BODY BGCOLOR=BLACK TEXT=WHITE>
FAIRY TALES 
Have you heard the story of little red riding hood? 
It's about...
</BODY>
</HTML>

If this HTML is even slightly difficult to understand (this will be the case for most people, myself included), stop and re-read the tutorial up to this point.

HYPERLINKS

So how to you make links using HTML? You use the A tag. A is short for anchor. The option you will use most often with this tag is HREF, short for Hyperlink REFerence. HREF is where the link points to.For example:

The HTML

<A HREF="http://www.yahoo.com">click here</A>

Will create a link to www.yahoo.com:

click here

Try it.

Another example:

The website

<HTML>
<BODY>
To go to yahoo, <A HREF="http://www.yahoo.com">click here</A>. 
To go to google, <A HREF="http://www.google.com">click here</A>. 
And <A HREF="http://etch.keenspace.com/darkpages/">you can click here to go to the Dark Pages</A>.
</BODY>
</HTML>

would look something like this:

To go to yahoo, click here.

To go to google, click here.

And you can click here to go to the Dark Pages.

If you want to change the color of the links, you can use the LINK and VLINK options in the BODY tag. LINK is the color of unvisited links, VLINK is the color of visited links. For example: A website with the HTML

<HTML>
<BODY LINK=RED VLINK=ORANGE>
This is not a link. 
<A HREF="">This is a link. It doesn't go anywhere, but it's still a link.</A>
</BODY>
</HTML>

would look something like this:

This is not a link.
This is a link. It doesn't go anywhere, but it's still a link.

There is also an option called ALINK, short for 'active link'. This is the color the link flickers to when you click it.

Example:

Note: be sure to remember to put the 'http://' in the address. Leaving it out will confuse the web browser and the link won't work.

Note: you can make a link to files on your computer. For example: the link <A HREF="file:///c:\file.html"> would open up c:\file.html. Be sure to prefix the path with "file:///" or it might not work.

Note: if there is another HTML file in the same directory as the current one, you can just type it's name. For example: if you name some files 'info.html', 'characters.html', and 'links.html' you could just type <A HREF="info.html">. You don't have to type out the full path.

IMAGES

Images are added using the IMG tag. In order to show an image, you have to use the SRC option to say where the image is.

Example HTML:

What it looks like:

Be sure to include 'http://' or it won't work.

Note that the IMG tag does not close. You don't write <IMG>...</IMG>.

To use a different image, just type in a different name under src.

Now, copy the graylast.png image to your computer (right-click it, go to 'save picture as') in the same place that your webpage is. Try this HTML: <IMG SRC="greylast.png"> . It should work. If not, it's probably not saved in the same place that the HTML file is. Make sure it's in the same place.

Example of using images and links:

The web page

<HTML>
<HEAD>
<TITLE>Images and links</TITLE>
</HEAD>
<BODY>
An image: <IMG SRC="graylast.png"> 
A link: <A HREF="">Note: this doesn't go anywhere.</A> 
An image inside a link: <A HREF=""><IMG SRC="graylast.png"></A> 
Image and text inside a link: <A HREF=""><IMG SRC="graylast.png">Text</A>
</BODY>
</HTML>

should look something like this:

An image:

A link: Note: this doesn't go anywhere.

An image inside a link:

Image and text inside a link:

Text

Note that if you misspell 'graylast.png' it doesn't work. Note that if you mess up the inside of the IMG tag it doesn't work. Try it out. Leave out one of the quotes inside the IMG tag and see what happens.

If you want to turn off the link border around the image (most people do), use the option BORDER and set it equal to zero. For example:

The webpage

<HTML>
<BODY>
<A HREF="">Image with a border: <IMG SRC="graylast.png"> Image with no border: <IMG BORDER=0 SRC="graylast.png"></A>
</BODY>
</HTML>

should look something like this:

Image with a border:

Image with no border:

Note that it doesn't matter whether you put the SRC option before or after the BORDER option, but both must be after IMG.

SOME OTHER TAGS

The following is a short list of tags most web designers will recognize:

<HR> - makes a horizontal ruler.

Sample HTML:

Text.
<HR>
More text.

What it looks like:

Text.

More text.

 - makes text italic.

Sample HTML:

Italic text.

What it looks like:

Italic text.

 - makes text underlined.

Sample HTML:

Underlined text.

What it looks like:

Underlined text.

<S> - makes text striked-out.

Sample HTML:

<S>Strike-through text.</S>

~~Strike-through text.~~

<PRE> - preformatted text. The web browser accepts line breaks.

Sample HTML:

One line.
Next line.

Yeee-ha.

<H1> through <H6> - makes text bold and larger than normal ("header").

Sample HTML:

<H1>Stuff.</H1>
<H2>More stuff.</H2>
<H6>I skipped 3, 4, and 5.</H6>

What it looks like:

Stuff.

More stuff.

I skipped 3, 4, and 5.

<CENTER> - centers things (text, images, etc.).

Sample HTML:

<CENTER>centered</CENTER>

what it looks like:

centered

 - Notes. Anything inside here is ignored.

Sample HTML:

One Two  Three Four.

What it looks like:

One Two Three Four.

Go ahead and try these out.

SAMPLE WEBPAGE

This is a sample webpage:

<HTML>
<HEAD>
<TITLE>A sample webpage</TITLE>
</HEAD>
<BODY>


<H1>This is a sample webpage</H1>
<HR>
Normal text. 
Bold text. 
Italic text. 
Underlined text. 
Bold italic underlined text.

</BODY>
</HTML>

When saved as HTML and opened as a web page, it should look something like this:

This is a sample webpage

Normal text.
Bold text.
Italic text.
Underlined text.
Bold italic underlined text.

MISCELLANEOUS

Feel free to find your own style of writing HTML. The following all do the same thing but are written in different ways:

one 
two

one two

one 
two

one
 
two

However, keep in mind that when you put something on a new line, the web browser will usually put a space there. So try to only put newlines either before or after .

If you want to use "<" and ">" in html, you have to use special characters. After all, if you typed something like "", the web browser would assume that you were trying to use a tag. In HTML, if you want to use "<", you type "<", and if you want to use ">" you type ">". Also, if you want to have a double-quote (") you would use """, and if you wanted to use an amperstand (&), you would use "&".

Sample HTML:

< 
> 
& 
"

what it looks like:

<
>
&
"

A complete list of special characters is available at "http://www.htmlhelp.com/reference/html40/entities/" . They are broken up into three sections: "Latin-1 Entities", "Symbols and Greek Letters", and "Other Special Characters".

Note: if you want to see what the HTML of a certain webpage is, use the "View Source" command. Under Internet Explorer, goto "View" (on the menubar), and then "Source".

EPILOUGE

By now, you should have a good grasp of HTML. Only a few tags were presented here, and topics such as hex colors, tables, lists, forms, special characters, javascript, and frames were either not discussed, or were not discussed much. However, it's a good idea to really get used to HTML before you move on. Make a few webpages for fun. Try out new stuff to see if it works. Write some really bad HTML and see what the web browser does. Don't worry, it won't break anything. Once you feel comfortable with HTML, the following site will be extremely helpful: "http://www.htmlhelp.com/reference/html40/alist.html" (WDG HTML 4.0 elements). It would be a good idea to keep this URL in your favorites list - it has essentially every HTML tag there is in a neat organized list. To group the tags by category, click on 'organizational list' at the top of that page.

I hope that this tutorial has helped you to learn HTML. If it has, good. If it hasn't... well, it's free so stop complaining. =]

DarkPhot'n Ashatar
January, 2002