HTML Tutorial

This is where the fun starts. It's now time to roll up your sleeves and really get down and dirty with homepage construction. I will start you out with the basics and everything you need to know to get you started, then you will need to turn to my reference guide for the rest of the language.

If you are a Geocities member and use one of the online homepage editors, you've probably seen terms like HTML or "tags" and might not of known what they mean. I will explain everything to you in this document.

HTML doesn't really stand for How To Make Links. It stands for HyperText Markup Language. All documents found on the web are written in HTML. What's meant by "Markup Language" is that it is plain normal, everyday text that is "marked up" with things called tags.

Why do we have tags? Why can't we just type and hit the bold, italics, or underline buttons if that's what we want? The reason we have tags is to make the file able to be read on computers using Dos, Windows 3.x, and Win 95/98. As well as Macintosh and UNIX systems. HTML tags provide a way to write a document that will look the same no matter what operating system or type of computer is used. You just can't accomplish this using traditional methods with programs like Word, WordPerfect, or other major word processors.

What is an HTML document made of anyway? It is a normal text file, only instead of ending in .txt, .wri, or .doc, it ends in .html (.htm if you are using Win 3.x). All written text in the file appears as plain, normal text. If you want your text to look a certain way, that's where tags come in. You "mark up" the plain text with tags that mean something to the "browser" software (the program that shows you web pages). The browser and the person using the browser to look at your page are called the "client". The browser then "interprets" the tags and modifies the text to look a certain way depending on the tag(s) used. This is where HTML differs from other "true" programming languages. True programming languages are compiled, not interpreted. Java, C/C++, Visual Basic, etc are examples of true, compiled programming languages.

So what do tags look like and how do I use them? All tags are started by placing the tag itself between < and >. Putting the tag between the brackets is called opening and closing the tag. You open a tag with < and close the tag with >. Once you do this with a tag, you have started the tag. It's just like starting the effect of boldface to affect the text. Now most of the tags have a matching "end" tag that ends the effect of the tag. Like ending the boldface effect on text. The end tag is opened with </ and is closed with >. It's really easier than it sounds. Here's some examples.

Examples:
To make text bold you use starting tag of  and the matching end tag of .
I am bold
Would appear as: I am bold

To make text italicized, you use the  and  tags.
I'm in italics.
Would appear as: I'm in italics.

To make text bold and italicized, you use them both.
I am both
Would appear as: I am both.

Tags that have a lasting effect are called destructive tags because they effect the text. Some tags don't have an end tag. They work their effect once (and not on text) and that is it. These are called non-destructive tags.

Example:
To make a horizontal rule you would use <hr>.
<hr>
Would appear as the horizontal line below this line of text.

One very important thing that you need to know is how browsers interpret spaces, tabs, and carriage returns. They don't display more than one space (tabs count as only one space) and they ignore carriage returns. So five spaces, two carriage returns, and three tabs would appear as one space.

Example: This:
I'm on one line. I'm on the next line.
Would appear as:
I'm on one line. I'm on the next line.

Not at all what it was supposed to look like. On the other hand,
This:
I'm on one line. I'm on the other.
Would appear as:
I'm on one line.
I'm on the other

Some tags have attributes. We'll use the <img> tag for example. The <img> tag is the image tag. <img> is the main part of the tag. As you see it, you can't do anything with it. That's why we have attributes. One of them is src. Src tells the browser where to find the img or image so that it can display it in the document. You take the attribute and add it to the opening tag only. Not the end. So the tag would be <img src="imagepath">. Because the <img> tag is non-destructive, you don't need an end tag.

Example:
This:
<img src="smhtml.gif">

Would appear as:

"smhtml.gif" is the filename of the image to insert into the page. One thing to note is that filenames are CAsE SEnsaTiVe whEN DeaLing WiTH wEbPaGeS. Be eXtrA careFul to gEt the CAPitalIZAtioN CorREct in FIlEnAmEs. Something else to note is that I used quotation marks (") around the filename. Whenever you use a tag with attributes USE QUOTATION MARKS around the value for the attribute. The whole idea is in case you have several attributes like in <img src="fie_animated.gif" width="88" height="31" alt="Microsoft Internet Explorer" border="0"> your browser needs to know what are attributes and what are the values of the attributes. It knows that attributes aren't inside the quotes so that helps to keep it straight. Just make 100% sure that every quote you begin, you have ended. If you get a really strange looking effect from adding a tag, you might want to check and see if you ended all your quotes.

You'll learn more of the img attributes later on.

Tags can also be contained within other tags. We'll use the <img> and <a> tags. The <a> stands for anchor and is used with the href attribute. These together make up a link. Href specifies the destination of the link.

Example:
This:
<a href="main.html">My main page</a>
Would appear as:
My main page
And would take you to my main page when clicked.

When you combine this with the <img> tag. You can create graphics that are links.

Example:
This:
<a href="main.html"><img src="smhtml.gif"></a>
Would appear as:

Everything contained within the <a> and </a> tags is made a link. If you never end the tag, everything becomes a link. You can now see the importance of ending tags.

Now that you have the basic concept of tags, we will now work on the structure of HTML files.

All HTML files have the following format:

<html> <head> <title>Your title here</title> </head> <body> Main part of file here. </body> </html>

The heading section contains information about the document. The body actually contains the document. For example, the title of this page is "HTML Tutorial". It is displayed at the top of this window. The body of this page is what you're reading now. See? All the tags I have discussed so far must be between the <body> and the </body>.

I think you are now ready to dive right into my reference. All of the more complicated tags will be discussed on pages of their own in a mini tutorial.

Š1996-1999 Gilpo All rights reserved. This document may not be altered in anyway or distributed without the expressed written consent of Gilpo. All information contained herein is deemed to be accurate but is not warranted.