Home | Programming Resources |     Share This Page
Challenged

Want to learn HTML fast? If you mostly watch television, have an attention span measured in microseconds, and think reading is a waste of your valuable time, this page is for you .

This page will teach you the basics of HTML as fast as humanly possible — you can even skip ahead to the part you are actually interested in, using the links below.

Common HTML questions:

Links to More Choices:


What is HTML?

HTML ( H yper T ext M arkup L anguage) is the language used to write Web pages. You are looking at a Web page right now.

You can view HTML pages in two ways:
  • One view is their appearance on a Web browser, just like this page — colors, different text sizes, graphics.
  • The other view is called "HTML Code" — this is the code that tells the browser what to do.
Here is the difference between HTML code and a browser display:

HTML Code     Browser Display
I want to <B>emphasize</B> this! I want to emphasize this!

The code on the left creates the browser display on the right.

Letters and words that are enclosed in "<" and ">" marks are called "tags." They tell the browser what to do:
  • The <B> tag tells the browser to make bold text.
  • The </B> tag means to stop making bold text.

What is a tag?

In HTML, a tag tells the browser what to do.
When you write an HTML page, you enter tags for many reasons — to change the appearance of text, to show a graphic, or to make a link to another page.
The tags you write are not visible on the browser, but their effects are.
Tags begin with the symbol "<" and end with ">".
Tags usually come in pairs, one that begins an action and one that ends it.
This tag: <I> starts printing italicized text.
This tag: </I> stops the effect of a previous <I> tag. Note the "/".
To italicize a word, you simply put <I> before the word and </I> after it:
HTML Code     Browser Display
I want to <I>italicize</I> this! I want to italicize this!

When you write an HTML page, you see all the tags and can change them. When you view the page on a browser, you see the result of the tags.

Do I have to memorize a bunch of tags?

No. Most programs that help you write HTML code already know most tags, and create them when you press a button. But you should understand what a tag is, and how it works. That way you can correct errors in your page more easily.

Here are some common tags:
Tag     HTML Code Example     Browser Display Example
<B> (Bold) I want to <B>emphasize</B> this! I want to emphasize this!
<I> (Italic) I want to <I>italicize</I> this! I want to italicize this!
<U> (Underline) I want to <U>underline</U> this! I want to underline this!

What is the simplest HTML page?

Here is the very least HTML code that can be called a page:
HTML Code     Browser Display
<HTML>

<HEAD>
<TITLE>This is my page title!</TITLE>
</HEAD>

<BODY>

This is my message to the world!

</BODY>

</HTML>

This is my message to the world!

You don't need to know the meaning of all these tags.
Always type a title between the <TITLE> and </TITLE> tags. This title will appear at the top of the browser display.
Your page contents go between the <BODY> and </BODY> tags.
You can type this code in any text editor or word processor, and if you save it as plain text with a file suffix of .html (example: mypage.html), you can view it with a browser.
After you have created a simple page using a text editor, you should consider getting a better HTML editor. There are lots of them. I even wrote one — it is called Arachnophilia , and it doesn't cost you any money.

What is a Hypertext link?

A hypertext link is a special tag that links one page to another page or resource. If you click the link, the browser jumps to the link's destination.

There are two parts to a link:
  • One part tells the human what to do.
  • The other part tells the browser what to do.
Here is an example:
HTML Code     Browser Display
<A HREF="http://www.microsoft.com">Go to Microsoft</A> Go to Microsoft

In this example, the phrase "http://www.microsoft.com" tells the browser what the link's destination is, and the phrase "Go to Microsoft" tells the human what is happening.
The link on the right is real — if you press it, you will go to Microsoft's Web site.
If you want to make a link to one of your own pages, just use the name of the page without the "http://" prefix:
HTML Code     Browser Display
<A HREF="../arachnophilia/index.html">Go to the Arachnophilia Home Page</A> Go to the Arachnophilia Home Page


How do I put a graphic image on my page?

Use the IMG tag. Here is an example:
HTML Code     Browser Display
<IMG SRC="book.gif">

This is a very easy tag to use, but take these precautions:
  1. If the name of the graphic file is in UPPERCASE, then type the name into the IMG tag in UPPERCASE also. If it is lowercase, type the name in lowercase. Case errors won't matter on your home computer, but when you load your page and graphics onto the Web, suddenly the graphics won't show up any more. This is because Windows and other popular home operating systems do not care whether the file names have the right case, but Web servers do.
  2. If you want to simply type in the graphic file name as shown here, the graphic file must be in the same directory as your Web page.
  3. You can't use just any graphic file on your page. You should limit yourself to GIF and JPG files — most current browsers can display these graphics correctly, and they are also efficient to store on your page and to download from the Web.

How do I put a background graphic on my page?

Add a special field to the BODY tag. Here is an example:
HTML Code     Browser Display
<BODY BACKGROUND="parchment.jpg">

Notes:
  1. Unlike this example, the background graphic repeats itself both horizontally and vertically. Therefore you can use a small graphic and still get full coverage of the browser background.
  2. You can achieve some special effects by using different background shapes. For example, the CareWare page's background is a long horizontal stripe with a pattern on the left edge. The pattern is designed to repeat vertically without showing a dividing line.

How do I choose colors?

Choosing colors is one of the more complex parts of HTML. To select common colors you can just type their names into a FONT tag. Here are examples:
HTML Code     Browser Display
I want <FONT COLOR="red">RED!</FONT> I want RED!
I want <FONT COLOR="blue">BLUE!</FONT> I want BLUE!
I want <FONT COLOR="green">GREEN!</FONT> I want GREEN!

But if you want to specify an exact color, you have to use special codes (don't despair — the better HTML editors let you use a color selector dialog):
HTML Code     Browser Display
I want <FONT COLOR="#004080">what I want!</FONT> I want what I want!
I want <FONT COLOR="#804040">what I want!</FONT> I want what I want!
I want <FONT COLOR="#8000ff">what I want!</FONT> I want what I want!

To choose a custom color in Arachnophilia , just put the editing cursor in the color definition and press the right mouse button.

How do I choose colors for my entire page at once?

You add some special fields to the BODY tag. Example:
HTML Code     Browser Display
<BODY BGCOLOR="blue" TEXT="red">

This is my page text!

</BODY>
This is my page text!


How do I make a link that sends e-mail?

An e-mail tag is not very difficult to design. The tag launches the visitor's own e-mail program and fills in the address you specify. Example:
HTML Code     Browser Display
<A HREF="MAILTO:youraddress@yourserver.com">Click here to send e-mail</A> Click here to send e-mail


How do I learn advanced HTML methods?

The easiest way to learn advanced methods (translation: neat tricks):
  • Browse the Web and look for interesting pages that have the features you want for your page.
  • Using the File menu features of your browser, copy the interesting pages onto your computer.
  • Load the pages into your HTML editor. If you don't have an HTML editor, click here .
  • Copy the code from the interesting page to your page.
Medium hard: browse the Web for HTML resources — there are many.  Go to a Search Engine
A somewhat harder way is to buy a book about HTML programming and read it.

These Pages Created and Maintained using    Arachnophilia.

Main Page

Home | Programming Resources |     Share This Page