HTML 2000 | home

Creating web pages for the new millennium.

The Internet is growing at an incredible pace, and we want everybody to be a part of this growth. HTML 2000 was created for the beginner to learn about designing web pages from the ground up and for the advanced web designers that want to learn a few more HTML tricks.

This downloadable help file is designed to help you learn about HTML and web page design. If you want to have more information about HTML, the HTML 2000 web site is updated more often than this help file. I hope this free resource will help you satisfy your web page needs.

Because these resources are free, I would appreciate any feedback (both good and bad) you have about HTML 2000. With this feedback I will continue to be motivated to provide with the opportunity to learn HTML for free. Feel free to email me at htmldownload@html2000.iwarp.com or visit the web site to send feedback from there.

I encourage everybody to tell people about this free web page design help that HTML 2000 offers. However, no part of this file may be reproduced, decompiled, or edited, in any form or by any means, without permission.

: : version history : :
7.8.2000 - v1.1
Added:
  • Advanced - Redirects
  • Advanced - Page Transitions
  • Advanced - Javascript - Multiple Image Rollovers

Edited:

  • Advanced - Javascript - Image Rollovers
  • Advanced - Search Engines

Plus many small mistakes & errors have been fixed!

5.22.2000 - v1.0
Initial Release

©2000 by Scott Kuhl
htmldownload@html2000.iwarp.com


Basics - Basics

Home : Basics

This course of pages will teach you the basics of web design. No previous knowledge of HTML or web design is required. Remember that HTML is really learned by practice, always try to practice everything you learn. There are only a few basic examples here, but with practice, you should be able to combine all of these skills to create a good web page.

1) Your first HTML file - Learn the foundation of HTML and make your first web page.

2) Editing HTML - More information about how HTML works.

3) Adding Color - Add some color to your page.

4) Creating Links - Make a link to another page.

5) Images - Add graphics to your page.

6) Text Appearance - Using fonts, bold, italics, etc.

7) Lists - Make lists easily.

8) Horizontal Rules - Learn to make dividers between different sections.

9) Tables - The most useful HTML command.

10) Do's and Don'ts - Learn good habits when designing pages.

11) Going Online - Putting your site up for all to see.


Basics - First HTML

Home : Basics : 1) Your first HTML file

HTML stands for Hypertext Markup Language, the bare bones of the Internet. If you truly want to understand web pages well, a basic understanding of HTML is a necessity. You can purchase programs like Microsoft Front Page or Netscape Composer to help you in designing web pages, but if you want to get the most out of HTML, basic knowledge of it is required.

To make a web page, all you need is a text editor (like Notepad) and a little knowledge. HTML is a text file made up of 'Tags.' A tag is a command inside of less than and greater than symbols (ex <html> ). Most tags also have a closing tag that tells the computer when to stop doing the command. Closing tags are written with a / in them. (ex </html> ).

Here are explanations of a few of the most basic HTML tags:

<html> </html> | Defines the text file as being in HTML format. This is found on the beginning and end of each web page.
<head> </html> | The heading area of a the page. The space between these two tags is used for special commands that does not have any connection to the actual formatting of the page.
<title> </title> | Defines the title displayed at the title bar of the browser window.
<body> </body> | Found after the <head> tag and is used to define the area of the file which formats the way the web page is seen.
<b> </b> | Makes text Bold
To make your first web page, open up Notepad and type in the following:
<html>
<head>
<title>My First Page</title>
</head>

<body>
Regular Text <b>Bold Text</b>
</body>
</html>

Save this file as something.html (not something.txt). Next, open up the file by double clicking on it or typing the location into the location bar on your web browser (ex c:\my documents\something.html). Note the "My First Page" in the title bar of the screen.

You should see something like the following:

Regular Text Bold Text

Every web page has a HTML file like the one you just made that goes with it. To see the actual HTML of a web page, open up a page in your browser and select VIEW | SOURCE in Internet Explorer or VIEW | PAGE SOURCE in Netscape. Try it right now! Anything you see on a site, you can "steal" to put on your own site, with a small amount of knowledge.

NEXT: Learn more about editing HTML files.

< back to basics main page


Basics - Editing

Home : Basics : 2) Editing HTML

Now, open your first HTML file in Notepad again. This time, add a couple returns after "Regular Text" so it looks like this:

<html>
<head>
<title>My First Page</title>
</head>

<body>
Regular Text

<b>Bold Text</b>
</body>
</html>

To a first time user, it would seem like now there should be a space between "Regular Text" and "Bold Text" when you view this file in your browser. But this is not the case. Web browsers do not care how many spaces are in your HTML file, you must use commands to change the text in any way.

To put these two phrases on different lines, we need to use the <p> (paragraph command).

<html>
<head>
<title>My First Page</title>
</head>

<body>
<p>Regular Text</p>
<p><b>Bold Text</b></p>
</body>
</html>

Now your web page will look as follows:

Regular Text

Bold Text

You can also make the paragraph be centered in the window by using <p align="center"> instead of <p>. Or you can right justify a paragraph by using <p align="right">.

What if you do not want a space between the two lines, like using <p> does, you must use the <br> (break) tag. Example:

<html>
<head>
<title>My First Page</title>
</head>

<body>
<p align="center">Regular Text<br>
<b>Bold Text</b></p>
</body>
</html>

This will give you a page that look like the following:

Regular Text
Bold Text

These are just a few of the many tags used in HTML.

NEXT: Learn about adding color to your web pages.

< back to basics main page


Basics - Colors

Home : Basics : 3) Adding Color

Adding colors to web pages is relatively simple. Each color has a six digit code assigned to it with a number sign in front of it. This code is the Hexadecimal (Hex) Triplet value. Instead of using a number system that goes from 0 to 9, Hex uses a system that starts with 0 goes to 9 and then from A-F. This allows one digit to stand for 16 values instead of just ten.

The first two numbers of the code is the amount of red. #FF0000 is red. The second two numbers is the amount of green. #00FF00 is green. The last two numbers represents the amount of blue. #0000FF is blue. Any combination of these codes can be used to create any color. A list colors and their codes is found on the colors page in the reference area.

To change the default colors on the whole page, you need to change an attribute to the <body> tag. The following are some attributes you can have inside the body tag:
bgcolor="..." | Sets the background color of the page.
text="..." | Sets the color of the text.
link="..." | Color of links.
vlink="..." | Visited link color.
alink="..." | Active link color.

Note that you do not have to define all of these attributes. If you do not set a color for a visited link, for example, the color of visited links will be set by the browser looking at the file.

An example of a page with blue background, white text and with red links. (we'll learn more about link tags next)

<html>
<head>
<title>My Colorful Page</title>
</head>

<body bgcolor="#0000FF" text="#FFFFFF" link="#FF0000">
<p>Regular Text<br>
<a href="link.html">Link</a></p>
</body>
</html>

Try it yourself!

NEXT: Making a Link

< back to basics main page


Basics - Links

Home : Basics : 4) Creating Links

Making a link requires have two HTML pages. So make two and name them "page1.html" and "page2.html" (make sure you save them in the same folder). The link tag, <a> is often called an anchor tag, we'll talk more about anchors later.

In "page1.html" put the following someplace between your <body> and </body> tags.

Link to <a href="page2.html">page 2</a>.

The <a href="page2.html"> means to make a link to page2.html when you click on the information following it. The </a> part of the link tells the browser to stop the link continue with regular text. The link you just made should look something like the following:

Link to page 2.

Try it and see if the link goes to the other HTML file.

There are a couple different kinds of links, relative and absolute. Most of the links you make, like the one we just made, will be relative. Relative pathnames point to files based on their locations relative to the current file, while absolute pathnames point to files based on their absolute location on the file system. We could make our link absolute by changing it to

Link to <a href="c:\my docs\page2.html">page 2</a>.

This link will work on your computer but when you put it up on a site or try it on another computer and the files are no longer on the c: in the "my docs" folder, it will not work. Here are a few examples of relative links:
href="file.html" | file.html is in the current directory or folder.
href="folder/file.html" | file.html is located in the directory called folder (and the folder directory is located in the current directory)
href="folder/morefiles/file.html" | file.html is located in the more files directory, which is located in the current directory.
href="../file.html" | file.html is located in the directory one level up from the current directory (a.k.a. the "parent" directory)
href="../../files/file.html | file.html is located two directory levels up, in the directory files.

To link to another page on the web, not one on your site, you simply need to put the address for the site inside href="...".

A link to <a href="http://www.yahoo.com/">Yahoo!</a>

Or to make a link for someone to send you an email:

Click <a href="mailto:name@domain.com">here</a> to email me!

You can also use the <a> tag to create an anchor on a page. You can use an anchor link to let a person click on your link to take you to a different place on the page, like the top for example. The next example will have a link up on bottom of the page that will move you to the top of the page when you click on it. (to make this work, you need enough information on your page to fill up at least one screen).

<html>
<head>
<title>Anchors</title>
</head>

<body>

<a name="top">

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
<p>Paragraph 7</p>

<a href="#top">To top</a>

</body>
</html>

I put an anchor on the top of this page so when you click on this link, it will take you to the top of the page. You can put as many anchors on a page as you want, but you should remember that your actual link should have # symbol in it (example: <a href="#something">). But you do not need the # symbol in your actual anchor (example <a name="something">).

NEXT: Using images

< back to basics main page


Basics - Images

Home : Basics : 5) Images

Images are probably the most fun part of web pages. You can put pictures of anything on your web site, from photographs to animations. To have make good graphics for your website, a good graphics program is a must. I recommend JASC Software's Paint Shop Pro. You can "steal" pictures from other people's web sites, but without a good graphics program, you can not customize the graphics to make your site personalized. Window's Paint will get you nowhere and Microsoft Photo Editor isn't much better.

When considering what images you should put up on your site, you must think about the size of the graphic. Keep your graphics as small as possible. I do not recommend having any graphics on a page that are more than 30KB unless the user chooses to see it.

There are two main types of images on the web: JPG and GIF. These types of formats are highly compressed, if you take a JPG file and save it as a BMP file, the size of the file increases tremendously. JPG compresses photographs or large pictures best, while GIF is good for small pictures with a few colors, transparency or animations.

When you work with GIF files, make sure you have the least number of colors in the picture as possible. You can do this by decreasing the size of the palette or decreasing the number of colors from 256 to 16, for example. You can make these changes with a good graphics editor.

Lastly, weather your image is a JPG or GIF, make sure the physical size (length and hieght) of it is reasonable. You can change this by using a crop tool or resize tool in a graphics program.

Now to the HTML side of images. Putting a image onto a page is relatively easy. <img src="person.jpg" width="50" height="50" border="0" alt="Person" align="left">

Will give you this: Person

Note that when you use align left, the text "wraps" around the picture. Remember that you do not have to define all of the attribute I have just defined. The code above will give you the picture, person.jpg (in the same directory...remember relative/absolute paths?). The picture will be 50 pixels tall and wide. While the picture is loading the word "Person" will show up. The word "Person" will also show up if rest your mouse over the picture (on most browsers). You can also have the browser put a border around the picture, this is usually done when you use the picture as a link. To make this picture into a link, just put the picture inside the link code:
<a href="somefile.html"><img src="person.jpg" width="50" height="50" border="1" alt="Person"></a>

Here is an example of a transparent GIF image: circle

You can tell the center of the circle is transparent because when you put it into a table with a background color (we'll talk about making tables later), the center of the circle is clear.
circle

Remember, this is just a crash course on HTML, to find out more about images, search for some help on the web, or just practice. HTML just takes a little practice everyday. There are countless "quirks" in HTML that just take time and experience to learn about.

NEXT: Text attributes.

< back to basics main page


Basics - Text Formatting

Home : Basics : 6) Text Appearance

There are many tags that have to do with changing the appearance of text. Here is a list of the tags, a example of what they look like, and an explanation of what it does.
<FONT size="2" color="#FFFF00" face="arial">...</font> | Example | Changes the size, color, and face (font). Size can be a number from 1 - 7 or a relative number like +1 (one size bigger than what is already set). Color sets the color of the font using color codes. Face is the font used. The font should be a standard font found on most computers like Arial, Times New Roman, Helvetica, Tahoma, or Courier. You can list different fonts for the computer to try until it finds one that works. Example: <font face="verdana, arial black, arial">
<BASEFONT size="2" color="#FFFF00" face="arial"> - Sets the base (default font size, color, and face for a page). However, often this does not work for all text on a page, for example, text in a table (which we'll cover later).
<BIG>...</BIG> | Example | Makes text big
<SMALL>...</SMALL> | Example | Makes text small
<B>...</b> | Example | Bold text
<I>...</I> | Example | Italicized text
<S>...</S> | Example | Strikethrough text
<STRIKE>...</STRIKE> | Example | Strikethrough text
<U>...</U> | Example | Underlined text. Warning: Underlined text is easily confused with a link!
<TT>...</TT> | Example | Teletype (or monospaced) text
<H1>...</H1>

Example

Heading #1
<H2>...</H2>

Example

Heading #2
<H3>...</H3>

Example

Heading #3
<H4>...</H4>

Example

Heading #4
<H5>...</H5>
Example
Heading #5
<H6>...</H6>
Example
Heading #6

Try some of these text attributes for yourself!

NEXT: Making a List and checking it twice.

< back to basics main page


Basics - Lists

Home : Basics : 7) Lists

HTML provides an easy way to create lists, ordered (numbered) or unordered (not numbered). There are several other different kinds of lists, but we will cover only a couple of them that will be able to be used for most of anybody's needs.

The ordered list tag is <ol>...</ol>. Inside these tags, you must define the individual list items, <li>...</li>. Here is an example:

<ol>
<li>List item #1</li>
<li>List item #2</li>
<li>List item #3</li>
<li>List item #4</li>
</ol>

This HTML should give you the following result when viewed in a browser:

  1. List item #1
  2. List item #2
  3. List item #3
  4. List item #4

The unordered list tag <ul>...</ul> is very similar, except the end result will have "bullets" instead of numbers.

<ul>
<li>List item #1</li>
<li>List item #2</li>
<li>List item #3</li>
<li>List item #4</li>
</ul>

Will give you:

  • List item #1
  • List item #2
  • List item #3
  • List item #4

NEXT: Horizontal Rules

< back to basics main page


Basics - Horizontal Rules

Home : Basics : 8) Horizontal Rules

HTML also has a simple way of making a horizontal rules (or lines) to divide separate parts of a page up. Horizontal Rule <hr> has several attributes which you can define:
align="..." | Changes the alignment of the rule. It can be left, right, or center.
size="..." | The size or height of the rule.
width="..." | The width of the rule. This can be written as the number of pixels wide (<hr width="400">) or as a percent of the width of the screen (<hr width="75%">).
color="..." | The color of the rule (this only works with Internet Explorer).

<hr align="center" size="5" width="80%">

Will give you a horizontal rule as follows:

NEXT: The most useful HTML command, the table.

< back to basics main page


Basics - Tables

Home : Basics : 9) Tables

Tables are probably the most helpful tool in HTML when you are trying to change the layout of a page or trying to make a page look exactly as you want it (which can be very difficult). However, tables can be one of the most complicated parts of HTML, so we'll start simple and get complex.

While we are using tables, remember that table can be any size, from the size of the whole page, to just enough for a word to fit into it. Using tables effectively will allow you to be able to put things exactly where you want them.

<table>...</table> is the basic table tag. <tr>...</tr> is used to set a row in the table. <td>...</td> is used to define the data inside each cell from left to right. (note: the tag <!--...--> is a comment and is not shown when viewed through a browser.)

<table border="1">

<tr> <!--start row 1-->
<td>Cell 1, Row 1</td>
<td>Cell 2, Row 1</td>
<td>Cell 3, Row 1</td>
</tr> <!--end row 1-->

<tr> <!--start row 2-->
<td>Cell 1, Row 2</td>
<td>Cell 2, Row 2</td>
<td>Cell 3, Row 2</td>
</tr> <!--end row 2-->

</table>

You should get the following table:
Cell 1, Row 1 | Cell 2, Row 1 | Cell 3, Row 1
Cell 1, Row 2 | Cell 2, Row 2 | Cell 3, Row 2

Setting the border to 0 is a great way to use tables to format text and pictures without being noticeable.

Here are some of the attributes that work with these tags:

<TABLE>
width="..." | Width of the table, either in percent (ex. 90%) or pixels (ex. 500)
border="..." | Width in pixels of a border around the table
cellspacing="..." | Spacing between individual cells
cellpadding="..." | Spacing inside cells between data and the edge of the cell
align="..." | Sets alignment (left, right, center, justify)
bgcolor="..." | Sets background color of table (only works on some browsers)
bordercolor="..." | Sets the border color (only works on some browsers)
bordercolorlight="..." | Sets border highlight color (only works on some browsers)
bordercolordark="..." | Sets the border shadow color (only works on some browsers)
<TR> = Table Row
align="..." | Horizontally aligns the contents of the cells inside the row (left, center, right, justify)
valign="..." | Vertically aligns the contents of the cells inside the row (top, middle, bottom). Note: This does not work in some browsers)
bgcolor="..." | Sets the background color of the row (only works on some browsers)
<TD> = Table Data (cell)
rowspan="..." | The number of rows spanned by a cell.
colspan="..." | The number of columns spanned by a cell.
align="..." | Horizontally aligns the contents of the cell (left, center, right, justify)
valign="..." | Vertically aligns the contents of the cell (top, middle, bottom). Note: This does not work in some browsers)

Rowspan and colspan are complicated but useful tools which are important to understand. Lets say we want to make a table that looks like this:
Title
Left | A | B
 | C | D

The code for this table is as follows:

<table border="1">

<tr> <!--start row 1-->
<td colspan="3">Title</td>
<!--"Title" cell will span 3 columns-->
</tr> <!--end row 1-->

<tr> <!--start row 2-->
<td rowspan="2">Left</td>
<!--"Left" cell will span 2 rows-->
<td>A</td> <!--row 2, col 2-->
<td>B</td> <!--row 2, col 3-->
</tr> <!--end row 2-->

<tr> <!--start row 3-->
<!--skip col 1 of row 3, it is defined when we used rowspan!-->
<td>C</td> <!--row 3, col  2-->
<td>D</td> <!--row 3, col 3-->
</tr> <!--end row 3-->

</table>

You can make this table even more complicated by adding in background colors, alignments, and widths.

Like many things with HTML, you can embed tales inside of each other! You have to keep your HTML logically organized and pretty to make this work, or you will be easily confused. Here is an example of the tables and then the code: (Note: Here I use &nbsp;. This stands for nothing. :-) Literally nothing, or a non breaking space. If you leave a cell blank don't use &nbsp; you might get undesired results! Try it yourself.)

<table width="75%" border="4" cellspacing="0">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>

    <table align="center" width="90%"
    border="1" bordercolor="#FF00FF">
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </table>

</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

Note that the inside table has a width of 90% but does not take up 90% of the screen. The inside table uses 90% of the space it has available, not total space of the screen. Remember that you can put anything inside a table, text, pictures, or links.

NEXT: Do's and don'ts of web design

< back to basics main page


Basics - Do's and Dont's

Home : Basics : 10) Do's and Dont's
  1. Think about tags before you use them, some tags only work in some browsers.
  2. Look at your pages on different computers with different browsers. You might be surprised at the differences browsers, operating systems, and screen sizes effect your pages!
  3. Organize you pages for quick scanning
    1. Use headings
    2. Use lists
    3. Make a menu with all the links on one place
    4. Important information should stand out!
    5. But don't use too much emphasis, people won't know where to look
  4. Make each page be independent. People might jump to a specific page while missing information on the pages between.
  5. Check your spelling and grammar. Some free HTML editors have spell check built in! If you use Notepad, make sure you double check your spelling.
  6. Group related information. Use tables, graphics, or horizontal rules to split up separate areas on a page.
  7. Be consistent. This will create a general "feel" for your site. Use of style sheets can help.
  8. Describe links when possible.
  9. Don't use too many links in your text, it gets distracting.
  10. Think about your links before you make them. Is it useful?
  11. Avoid using phrases like: click this link or click here.
  12. Don't use too many images, these pages take a long time to load. Also, keep images as small as possible.
  13. Use the same image twice when possible, the computer doesn't have to download it each time you use it, it keeps recent images close by.
  14. Always use the ALT attribute of <img> in case someone has pictures turned off, or doesn't have time to wait for the page to load.
  15. Be cautious with backgrounds and colored text. Everything should be easily readable.
  16. Each page should have a link back to your home page in case someone gets "lost."
  17. Each page should also have a standard signature on the bottom of each page. This can provide contact or copyright information
  18. Don't say "Under Construction." Every web page is always under construction.

NEXT: Putting your site online

< back to basics main page


Basics - Online

Home : Basics : 11) Going Online

Whether you are looking for a free place to put your own personal site or your own domain name, there are many different places to choose from.

There are many places that host web sites for "free." The only cost to you is being forced to have an advertisement on the top you your site. These sites usually do not allow for adding complicated features such as chat rooms, java applets or CGI scripts. These are all advanced features which are used only by more advanced users. I strongly recommend trying one of the services found in the Links area.

Signing up for such a service is a relatively easy process. Make sure you read everything carefully and note your web site address, user name, password, and FTP address.

You can usually pay these free sites to get rid of the the advertisements on your page or to use more features. If you want your own domain name, it can cost a bit of money. A domain name costs US$35/year and the monthly fees for hosting are probably over US$10 depending on what you want.

See the links area for more details on finding a host for you.

If you have a free site for your first time, you will need to use a FTP Client (if you need one, see the links area) to transfer your files from your computer to the server. Sometimes your service might have a web page that you can go to in a "members area" that you can upload files to the server from your web browser. I recommend trying FTP because it is less time consuming than going to a web site. Your service should have more information on FTP and how to set it up.

Congratulations, you have finished the basics of HTML! Go back to the home page to learn even more about HTML.

Happy HTML'ing!


Advanced

Home : Advanced

JavaScript Area - Learn how to make your pages interactive with the mouseover command and pull-down menus.

Redirects - Redirect visitors to another page. This is helpful if you have moved your site or pages around.

Page Transitions - Use Internet Explorer's page transitions to let visitors see web load in different ways.

Favicons - These are icons that can be made to appear next to your bookmark when somebody bookmarks your site (IE only).

Search Engines - Making your website searchable is very difficult, but there are free services that make it easy for webmasters to add this feature to their sites.

Imagemaps - Make one image link to one or more pages.

Frames - Use frames to make your site easier to navigate.

Cascading Style Sheets (CSS) - Easily change the appearance of of elements on your pages with simple commands.

Clear dot GIF - Learn the secret to making a web page layout look exactly as you want with this HTML trick.

Secure Your Images - This page describes one way to help prevent the average user from stealing your picture. It's not fool proof, any webmaster can figure it out, but it does fool many people.

Forms - Quickly create a form for feedback and other purposes on your web site.

Counters - See how many people are visiting your site.

Getting Noticed - Get more visitors by advertising your site both online in search engines and offline.

Layout with HTML - Web pages can look dramatically different between different operating systems and browsers.

< back the HTML 2000 home page


Advanced - CSS

Home : Advanced : CSS

Many basic HTML tags are now deprecated in HTML in favor of style sheets. Cascading Style Sheets (CSS) is a easy way to give your web site a feel without using commands over and over again. However, CSS only works with newer browsers, like Internet Explorer 4 and Netscape Navigator 4 and better.

CSS lets you define attributes of a HTML command once for a whole page. For example, with CSS we can define everything inside the <p>...</p> command to have be red or have some other unique attribute. Then whenever you use the <p>...</p> command anywhere on you page the paragraph will show up as red. CSS many times gives you more control over the appearance of objects on your web page. You can also use CSS to define attributes for a whole site.

Here is an example of an HTML file that uses CSS to make <h1>.../<h1> bold and green and <p>...</p> font size 2, face arial, and purple. It also will make a custom command that I can apply anywhere I want that makes text large and orange, called CUSTOM. This particular example is called an embedded style sheet:
<HTML>
<HEAD>
<TITLE>CSS Example</TITLE>
<STYLE TYPE="text/css">

<!--
H1 { color: #008000; font-weight: bold }
P { font-family: Arial; color: #800080; font-size: 14px }
.CUSTOM { font-size: large; color: #FF8000 }
-->

</STYLE>
</HEAD>
<BODY>

<H1>Heading</H1>
<P>In this simple example, we use CSS to define some tag attributes for one page</p>
<H1>Heading</H1>
<SPAN STYLE="custom">This is my custom style.</SPAN>

</BODY>
</HTML>

This is what this CSS Example will look like. Here are some CSS attributes that can be used with almost any HTML tag.
margin-top | Sets the top margin of an object. All margin values can be entered in numerical lengths or percentages.
margin-right | Sets the right margin of an object.
margin-bottom | Sets the bottom margin of an object.
margin-left | Sets the left margin of an object.
margin | Sets the top, right, bottom and left margin.
padding-top | Sets the top padding of an object. All padding values can be entered in numerical lengths or percentages.
padding-right | Sets the right padding of an object.
padding-bottom | Sets the bottom padding of an object.
padding-left | Sets the left padding of an object.
padding | Sets the top, right, bottom and left padding.
color | Sets the color (usually text) by using HTML RGB color triplet codes.
background-color | Sets the background color of the object by using HTML RGB color triplet codes.
background-image | Sets background image.
border-style | Assigns border style of all four borders of an object. Values can be none, dotted, dashed, solid, double, groove, ridge, inset, and outset. Borders can be individually set by using border-bottom-style, border-left-style, border-right-style, border-top-style.
border-color | Sets the border color by using HTML RGB color triplet codes
border-width | Defines width of all four borders. Values can be thin, medium, thick, or a length value. You can define individual parts of a border by using border-bottom-width, border-top-width, border-left-width, and border-right-width.
border | A short way to assign the same width, color, style on all four borders of an object.
font-family | Sets font face. More than one font can be listed, in case one is not present on the computer viewing the page.
font-size | Font size. This can be an absolute, relative, or percentage value.
font-weight | Values include: normal, bold, bolder, or lighter.
font-variant | Values include: small-caps or normal

If you get tired of defining the CSS styles on every page on your site, you can use the <LINK> command to use a 'external' CSS file. This is very easy and convienent to do. Using well designed external CSS files allows you to drastically change the look of all of your pages on your site, while only changing one file. To do this, you first have to make a text file named mystyle.css using any text editor. This file can look like this:

BODY { background-color: #CCFFCC;
    font-family: Arial, Delvetrica, sans-serif;
    color: #330066;
    padding: 50px, 70px
A:link { color: #CC9900 }
A:visited { color: #660000 }
A:hover { color: #FFCC00 }
A:active { color: #FF0000 }
H1 { color: #996633;
    background-color: #FFFFCC }

Whenever you want to use this CSS, you only need to place the following between the <HEAD>...</HEAD> tags in you HTML file:

<LINK REL="stylesheet" HREF="mystyle.css">

A third way to use CSS to improve your site is using 'inline' styles. You can use this when you want to have a style defined for one element on your page, not the whole page or site. You can use the <SPAN>...</SPAN> and STYLE. Example:

<P style="color: red; font-family: arial; font-weight: bold">This paragraph uses the font 'arial' in red and bold</P>

<P>This paragraph is divided up using the 'span' tag.

<span style="background-color: #123456; color #FFFFFF">Background Color.</SPAN>

<SPAN STYLE="font-family: courier; size: medium">Medium Courier.</SPAN></P>

This paragraph uses the font 'Arial' in red and bold

This paragraph is divided up using the 'span' tag. Background Color. Medium Courier.

Note: You can assign the <SPAN>...</SPAN> tags and STYLE attribute with any HTML tag except the following: <BASE>, <BASEFONT>, <HEAD>, <HTML>, <META>, <PARAM>,<SCRIPT>,<STYLE>, and <TITLE>.

< back to advanced area


Advanced - Clear Dot

Home : Advanced : Clear Dot GIF

The clear dot gif is a little talked about trick that many web designers use. If you are trying to make a web page with a complex layout and are running into problems the clear dot gif trick is for you. Sometimes when you are making a complex design, you find it is next to impossible to do with standard HTML and make it look the same between different browsers.

Lets pretend you want text on your web page to appear as follows:

Text

Text 1

Text 2

Text 3

Text 4

Text 5

Try to make this using html, you will probably find it very complicated to make. The "Text 1" has one pixel space above it and is indented one pixel. "Text 2" has a two pixel space above it and is indented two pixels. "Text 3" has a four pixel space above it and is indented four pixels.

You could make the indentions using tables and defining the width of a cell or table. And then you could use Cascading Style Sheets to add spacing. This process would be time consuming compared to making it with a clear dot gif. This gif graphic is one pixel and is transparent. The small size of the image makes it download almost instantly. The pixel can be stretched by defining the width and height. Example: <img src="clear.gif" width="4" height="1" border="0"> To make the small image less noticeable, I always keep either the width or height equal to one and the border equal to zero. In the example above, I used one clear dot to make a space between the texts and another to make the indentation.

Here the clear gifs are purple so you can see them.

Text

Text 1

Text 2

Text 3

Text 4

Text 5

Click here to go to the HTML 2000 web site to download your own clear dot gif. The link for the image can be found at the bottom of the page.

To learn another trick that you can use the clear dot gif with, visit the Secure Your Images page.

< back to advanced area


Advanced - Counters

Home : Advanced : Counters

Counters count the number of hits or visits to a page. Every time the page is downloaded from the server, the counter is updated. This is the main way to see how often you page is being visited.

If you are using a free service to host your web site, first check out your service's web page to see if they have ready made ones for you to use. If you are not using a free service, I recommend looking around for a CGI script to allow you to put a counter on your page.

Another way to monitor how many visitors you get to a site is by using a third party counter like NedStat.

< back to advanced area


Advanced - Favicons

Home : Advanced : Favicons

If you are a Microsoft Internet Explorer user, you may have noticed that when you bookmark a site, sometimes a eye-catching icon appears next to it.

To do this, all you need is a hidden link in your <HEAD>...</HEAD> area on your pages and an icon. Favicon.com explains this process in great detail. It even has an online utility that allows you to create your own icons and have them emailed to you.

NOTE: If you are using a free service to host your site, favicons may not function for your visitors. This is due to the way your host has their server set up.

< back to advanced area


Advanced - Forms

Home : Advanced : Forms

Forms are a way for visitors to your site to interact with your site. It allows a visitor to send you information or to send information to the site to be processed in a certain way. Creating a form usually involves writing or obtaining a script program to run on the server like a CGI script.

If you are using a free web service to post your site, first check their web site. Most of the time they have already made up scripts that are easy to put on your site.

Because of the complexity of many forms, I recommend visiting other sites that have information on CGI and forms. If you are interested how to use specific form tags, there is a comprehensive listing of all of the form tags and their uses in the Tag Encyclopedia.

< back to advanced area


Advanced - Frames

Home : Advanced : Frames

Frames are more than one HTML page displayed together on one screen. Frames are a very helpful way to organize large web sites with a large database of multiple levels of information. I do not recommend using frames on a site that does not have a lot of information, because frames are not the most user friendly or pleasing to the eye. Frames are also not compatible with very old browsers.

First, you have to make a frameset HTML file. This file determines what the appearance of your frames will be, and what pages they will display. A frameset HTML file (named index.html) could look like the following:

index.html
<html>
<head>
<title>Blue and White Page</title>
</head>

<frameset cols="200,*">
<frame src="menu.html" name="blue">
<frame src="main.html" name="white">
</frameset>
</html>

When this HTML file is loaded, it will display a column on the left hand side of the screen 200 pixels wide. In that space, menu.html will be shown and that frame's name will be "blue". The other frame will cover the rest of the screen (defined by "*"). It will show main.html and will be named "white".

The secret of frames is an attribute of the <a> (link) tag. The attribute is called target. Target is used on your links to say what frame the link should be opened up in.

Now we need to make the two HTML files name menu.html and main.html. We will make a third page to link to called 3.html. Here is what they look like:

menu.html:
<html>
<head>
<title>Menu</title>
</head>
<body text="#FFFFFF" bgcolor="#000080" link="#FFFFFF" vlink='#FFFFFF">

<p>menu.html</p>
<p>This is the menu frame named blue.</p>
<p><a href="main.html" target="white">This link will make the right frame show main.html</a></p>
<p><a href="3.html" target="white">This link will make the  right frame show 3.html</a></p>
</body>
</html>

main.html:
<html>
<head>
<title>Main</title>
</head>
<body background="white">
<p>main.html</p>
</body>
</html>

3.html
<html>
<head>
<title>3</title>
</head>
<body background="white">
<p>3.html</p>
</body>
</html>

To see what this frameset looks like, click here.

In this example, you could also put links in the white frame targeted to change the blue or menu frame.

The last important tag to understand when making frames is the <base> tag. If you get tired of targeting all of your links in a page, you can do them all automatically by using the <base> tag inside the <head>...</head> of an HTML file.

For example, we could change menu.html another html file that would act exactly the same, menu2.html:

menu.html:

<html>
<head>
<title>Menu</title>
</head>
<body text="#FFFFFF" bgcolor="#000080" link="#FFFFFF" vlink='#FFFFFF">

<p>menu.html</p>
<p>This is the menu frame named blue.</p>
<p><a href="main.html" target="white">This link will make the right frame show main.html</a></p>
<p><a href="3.html" target="white">This link will make the  right frame show 3.html</a></p>
</body>
</html>

 menu2.html:

<html>
<head>
<title>Menu</title>
<base target="white">
</head>
<body text="#FFFFFF" bgcolor="#000080" link="#FFFFFF" vlink='#FFFFFF">

<p>menu.html</p>
<p>This is the menu frame named blue.</p>
<p><a href="main.html">This link will make the right frame show main.html</a></p>
<p><a href="3.html">This link will make the  right frame show 3.html</a></p>
</body>
</html>

With menu.html, you have to use the target attribute whenever you want to link to another frame. With menu2.html, you have to use the target attribute whenever you do not want to link to the white frame. If you wanted a link targeted at itself in menu2.html, you have to use target="_self".

For more information on all of the different frame tags, see the Tag Encyclopedia in the reference area.

< back to advanced area


Advanced - Getting Noticed

Home : Advanced : Getting Noticed

Unfortunately, going through the work of building a web site does not guarantee people will notice it. Building a well designed web site with useful content will only get users to come back again. The hardest part is getting the first visitors to look at your site.

With the incredible size of the Internet, someone finding your page on accident is next to impossible. The first and easiest step to getting lots of hits is getting listed in search engines. I do not recommend paying a company to do this for you. These companies often advertise that they will submit your web site to thousands of search engines. The reality is that the vast majority of internet users use only a few search engines, and it is relatively easy to get listed in all of them.

Here is a list of search engines that are popular on the web. The important engines to get listed in are on the top of the list while the small and less popular engines are listed towards the bottom. There are many more search engines than those on this list. The first column of the table below is the names of the search engines. The second column is a link to the submission page for the engine. The third column indicates weather you need to first find a 'category' on the search engine, and press submit from there. Note: This list does not include meta seach engines (engines use a combination of other search engines). Some search engines use a directory and a search engine like Alta Vista and Hotbot.
Open Directory Project |  | Categories - More Info
Yahoo! |  | Categories - More Info
Alta Vista | Submit | Uses Open Directory Project
AOL | Submit | Uses Open Directory Project
HotBot | Submit | Uses Open Directory Project
Lycos | Submit | Uses Open Directory Project
MSN | Submit |
Northern Light | Submit |
Excite | Submit | Uses Open Directory Project
Infoseek | Submit |
Google | Submit |
Snap |  | Categories
Web Crawler | Submit |
Direct Hit | Submit |

For help submitting your site to search engines, go to the links page for utilities to help.

You can also use newsgroups to announce your web site. One newsgroup is only used for WWW related announcements. It is called comp.infosystems.www.announce.

Try searching on any search engine for a web ring that you can join. This groups up sites with similar subjects by putting a small graphic on you page. Visitors can go to another site by clicking on that graphic, and people can get to your site by click on the graphic from other pages.

Advertise off of the Internet. Make business cards, flyers, and advertisements.

< back to advanced area


Advanced - Imagemaps

Home : Advanced : Imagemaps

Usually, when you use a picture for a link, you simply but your <img> tag (image tag) inside your <a> tag (link tag). However, you can define links on an image a different way, called imagemaps. In imagemaps, clicking on different parts of an image will activate different links. There are two types of imagemaps, client-side and server-side. We will concentrate mostly on client-side maps which are usually used today, and are supported on Netscape 2.0 and Internet Explorer 3.0 and later.

Imagemaps can be tedious if you are working with complicated shapes for links on an image. Imagemaps use a "map" that is put over an image. This "map" needs to have areas defined by using rectangles, polygons, and circles. You need to make a map in your HTML file by using the <map>...</map> tag. Example:

<map name="mapname"> <!--put coordinates and links here--></map>

Between these two map tags, you need to use another tag, the <area>...</area> tag. The coordinate system for this tag starts at the upper left pixel of the image. There are three main types of <area> tags, they are all listed and explained below:

<area shape="rect" coords="x1,y1,x2,y2" href="url">

This will make a rectangle using points x1,y1 as the upper left corner and points x2,y2 as the lower right corner. "href" sets to what page the user will be taken to, just as the <a> tag does.

<area shape="circle" coords="x,y,radius" href="url>

In this tag, x,y is the coordinates of the center of the circle and 'radius' is the radius of the circle.

<area shape="poly" coords="x1,y1,x2,y2,x3,y3,...,xN, yN" href="url">

With the polygon tag you can make a polygon with as many sides as you want. This can be very helpful with complicated, but tedious to set up.

Here is an example of an image map that uses a circle, polygon, and rectangle:

To tell the browser what image to put the map onto, you need to have define which image you want the imagemap on. You can do this by using the usemap attribute of the <img> tag. <img src="image.gif" usemap="#mapname">

Here is the HTML code for the imagemap above:

<IMG SRC="imagemap.gif" USEMAP="#map" WIDTH=175 HEIGHT=75 BORDER=0>
<MAP NAME="map">
<AREA SHAPE=CIRCLE COORDS="26,26,22" HREF="1.html">
<AREA SHAPE=POLY COORDS="62,32,41,64,93,64" HREF="2.html">
<AREA SHAPE=RECT COORDS="114,32,171,70" HREF="3.html">
</MAP>

There are free utilities that make building imagemaps easier. Such programs can be found in the Links and Utilities area.

< back to advanced area


Advanced - Page Transitions

Home : Advanced : Page Transitions

This feature can only works with Internet Explorer.

Page transitions can add some excitement to your web site, but can be annoying if overused.

Here's the code you need to put inside your <head>...</head> tags:

<meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0,Transition=0)">

The value for http-equiv can be Page-Enter, Page-Exit, Site-Enter, or Site-Exit. This sets what transitions will be used for when you enter the page, exit the page, enter the site, and exit the site respectively. Therefore, you can have four of these tags inside your <head>...</head> section.

Duration sets how long the transition will take in seconds.

Transition defines what type of transition will be used. The table below describes what number makes what transition.

Page Transition Codes
0 | Box in
1 | Box out
2 | Circle in
3 | Circle out
4 | Wipe up
5 | Wipe down
6 | Wipe right
7 | Wipe left
8 | Vertical blinds
9 | Horizontal blinds
10 | Checkerboard across
11 | Checkerboard down
12 | Random dissolve
13 | Split vertical in
14 | Split vertical out
15 | Split horizontal in
16 | Split horizontal out
17 | Strips left down
18 | Strips left up
19 | Strips right down
20 | Strips right up
21 | Random bars horizontal
22 | Random bars vertical
23 | Random

< back to advanced area


Advanced - Redirects

Home : Advanced : Redirects

With this simple <meta> tag in your <head> section, you can create a redirect:

<meta http-equiv="refresh" content="10; URL=http://www.html2000.iwarp.com/">

This tag will display the web page and after ten seconds the browser will automatically take the visitor to HTML 2000. You can change the URL to redirect a visitor to any page on the internet. To adjust the amount of time (in seconds) the page is displayed, edit the content's value.

Here is an working example of a redirect that takes you to the HTML Help Welcome page.

< back to advanced area


Advanced - Search Engines

Home : Advanced : Search Engines

Have you always wanted to add a search engine to your site? Is your site getting too large to navigate easily? There are free services available that make it easy to add search capabilities to any site.

Atomz.com - an excellent and powerful way to make your site searchable. If you have a smaller site, this service does not require you to put a banner on your results lists.

SearchButton.com - an excellent and powerful way to make your site searchable. Visit their site to get lots more information about this exciting service. Since this service is free, an advertisement is automatically shown on the top of the results lists.

< back to advanced area


Advanced - Secure Images

Home : Advanced : Secure Your Images

You can use the clear dot gif to make your images difficult for the average web visitor to take from your site. Remember that this technique is not fool proof by any means - if a user is seeing something on their screen, its on their computer. However, using this trick will help you prevent this from happening by fooling the typical web surfer. For a surfer to get past this trap, they have to search though your source code to get the actual location of the picture. This will discourage many people and confuse people that don't understand HTML.

This trick uses the BACKGROUND="image.jpg" attribute of the <TABLE> tag. For example, this code:

<TABLE BACKGROUND="person.jpg" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR><TD>&nbsp;</TD></TR>
</TABLE>

Will make this:

Now, we have two more problems to solve. First, you can't see the whole image. And second, when you right click on the image you still can save it in some browsers.

To kill these two birds with one stone, we can use the clear dot gif to help us out. This image will create a clear covering over your picture. You set the size of this image to be exactly the same size as your real one.

This code:
<TABLE BACKGROUND="person.jpg" BORDER="0" CELLSPACING="0"
CELLPADDING="0">
<TR><TD><IMG SRC="clear.gif" HEIGHT="50"
WIDTH="50"></TD></TR>
</TABLE>

Will make this:

Now, when you try to right click on this image to save it, you get a box that looks like you are saving the image, but you are really saving the clear cover to your hard drive. It is impossible to download this secure image unless you view the source of the HTML file. If you want to get more confusing, change the name of your "clear.gif" to be "image1.gif" and then it will look even more realistic when the browser asks where you want to save the image.

This trick is effective because visitors will try to save your image and they will think they did it successfully and they will move on. Later, when they try to view the downloaded image they will see a 1x1 transparent picture.

NOTE: Some older browsers do not understand the BACKGROUND attribute of the <TABLE> tag, and the image will not appear at all. But 99% of your visitors should be able to see the image and be fooled by this simple HTML trick.

< back to advanced area


Advanced - Browsers

Home : Advanced : Layout with HTML

Always remember to look at your web pages on different computers, different operating systems, and different browsers. Netscape Navigator and Microsoft Internet Explorer display web pages differently. If you take web design seriously, I strongly recommend installing both browsers onto your computer. When designing pages, you also have to realize that everybody is not using the same version of each browser. Older versions of browsers do not support cascading style sheets, frames, and special multimedia can not be viewed on some browsers.

< back to advanced area


Advanced - Javascript

Home : Advanced : JavaScript

Mouseover - Put a message in the status bar of a browser when the mouse cursor is placed over an object.

Pull-Down Menu - Add a menu to you page that easily organizes many links.

Image Rollovers - Make an image change when the mouse cursor is placed over it.

Multiple Image Rollovers - Need a more complicated image rollover? This script lets you rollover more than one image.

< back to advanced area


Advanced - Javascript - Rollovers

Home : Advanced : JavaScript : Image Rollovers

 To make an image rollover (an image that changes when you put your mouse over it) you need to use a simple JavaScript. The first step is to place the following between the <head>...</head> tags in your HTML.

<script language="JavaScript">
<!--
if (document.images)
    {
    pic1on= new Image();
    pic1on.src="on.gif";
    pic1off= new Image();
    pic1off.src="off.gif";
    }

function lightup(imgName)
    {
    if (document.images)
        {
            imgOn=eval(imgName + "on.src");
            document[imgName].src= imgOn;
        }
    }

function turnoff(imgName)
    {
    if (document.images)
        {
            imgOff=eval(imgName + "off.src");
            document[imgName].src= imgOff;
        }
    }
//--->
</script>

Then you need to put the following where you want the image to appear between your <body>...</body> tags with a couple of additions. Your tag will look like this:

<A href="http://www.someplace.com/" onMouseover="lightup('pic1')" onMouseout="turnoff('pic1')">
<img src="off.gif" width="75" height="50" border="0" name="pic1">
</A>

If you are confused, you can find more information about this type of command on the mouseover page. Remember to use all of the correct punctuation or the script will give you an error. Also remember to name your image so that the script knows which one to change. If you don't want the image to link to another page, replace it with a "#" like I have done below:

You can add more images to this script by simply adding them to the script in the <head>...</head> section using pic2on and pic2off then pic3on...etc.

If this JavaScript doesn't fill your needs, try using the multiple image rollover.

back to advanced : javascript page


Advanced - Javascript - Menus

Home : Advanced : JavaScript : Pull - Down Menus

A pull-down menu is an easy way to organize many links into one small menu. Making one of these menus is relatively easy to do, it only requires a small JavaScript.

First, put the following code in between the <head>...</head> tags in your HTML document.

<SCRIPT LANGUAGE="JavaScript">

<!--
function formHandler(form){
var URL = document.form.site.options[document.form.site.selectedIndex].value;
window.location.href = URL; }
// -->

</SCRIPT>

Then you just put the following code where you want the menu between the <body>...</body> tags in your HTML document.

<form name="form">
<select name="site" size=1>
<option value="">Go to....
<option value="../../index.html">Home
<option value="../../basics/index.html">HTML Basics
<option value="../../advanced/index.html">Advanced
<option value="index.html"> - More JavaScripts
<option value="../../reference/index.html">Reference
<option value="../../links/index.html">Links
</select>
<input type=button value="Go!" onClick="javascript:formHandler()">
</form>

This will give you a pulldown menu that looks like this:

Feel free to modify and customize this code to meet your needs!

< back to advanced : javascript page


Advanced - Javascript - Mouseover

Home : Advanced : JavaScript : Mouseover

This page will teach you how to use JavaScript's onMouseOver command to put a word or phrase in the status bar (on the bottom of a browser) when your mouse if over a specific object. To see an example of one, put your mouse over this link and look at your status bar.

Putting this effect on your web pages is easy to do. You only need to use a couple commands:

onMouseover="window.status='Put text here';return true"
onMouseout="window.status=' ';return true"

The first command will put the text you define into the status bar when you put your mouse over a object you define. The second command will clear the status bar when your mouse leaves the object. The object can be many things, but most often, it is a image or a link. Here is an example of the full code for both of these situations:

<img src="koala.jpg" onMouseOver="window.status='A koala bear'; return true" onMouseOut="window.status=' '; return true">
<a href="index.html" onMouseOver="window.status='Back to JavaScript main page.'; return true" onMouseOut="window.status=' '; return true">JavaScripts</a>
JavaScripts

< back to advanced : javascript page


Advanced - Javascript - Multiple Rollovers

Home : Advanced : JavaScript : Multiple Image Rollovers

 First, I recommend reading the regular Image Rollover (if you haven't already done so) page before we get into to multiple Image Rollovers. Use the regular image rollover script if it does what you want because it is easier to set up, this one can get very complicated. This script is nice to use when you have a menu and you want to have a picture change describing what you are selecting in the menu. You need this script if you want to create something like the following:
Search Info
Basics

There are seven images that make up this small menu:

html.gif
search-off.gif
search-on.gif
search-info.gif
basics-off.gif
basics-on.gif
basics-info.gif

Here is what the script looks like that is inside the <head>...</head> section of this HTML file:

<SCRIPT LANGUAGE = "javascript">
<!--

if (document.images)
{
infoimagedefault = new Image();
infoimagedefault.src = "html.gif";

image1on = new Image();
image1on.src = "search-on.gif";

image1off = new Image();
image1off.src = "search-off.gif";

infoimage1 = new Image();
infoimage1.src = "search-info.gif";

image2on = new Image();
image2on.src = "basics-on.gif";

image2off = new Image();
image2off.src = "basics-off.gif";

infoimage2 = new Image();
infoimage2.src = "basics-info.gif";
}

function changeImages()
{
if (document.images)
{
for (var i=0; i<changeImages.arguments.length;
i+=2)
{ document[changeImages.arguments[i]].src = eval
(changeImages.arguments[i+1] + ".src");
}
}
}

// -->

</SCRIPT>

This script is time consuming and sometimes complicated to set up. The first image you define in the script is the default 'info' image. Then you list the 'on' and 'off' images for the individual menu items and the 'info' image for each corresponding images. Feel free to add more images to add more images to this script, I am only using a few to keep the scripting simple.

Once you have that all set up, you need to call up that script from your HTML. This is also more complicated than the regular image rollovers because we are working with many more images. First name each of your images a logical name that corresponds with the name you gave it in the script.

name="image1"

name="infoimage"

name="image2"

For example, to name the search-off.gif, all we need to write is:

<img src="search-off.gif" name="image1" height="50" width="100">

To call up the script, we put the onmouseover and onmouseout commands inside the <a> tag for our link. Here is the setup for this:

<a href="../../search/index.html" onmouseover="changeImages('image1', 'image1on', 'infoimage', 'infoimage1')" onmouseout="changeImages('image1', 'image1off', 'infoimage', 'infoimagedefault')">
<img src="search-off.gif" name="image1" height="50" width="100">
</a>

Notice that the image names are alternating. The first is the HTML name of the image you want to change. The second is the script name you want to change it to. The third is the HTML name of the image, the forth is the script name that you want to change it to. Also, make sure that you keep all of your little quotes and commas correct, one mistake will cause the script to give users an error!

Alright, here is the complete HTML part of the menu shown on the top of this page:

<table border="0" width="100%">
<tr>
<td width="50%">

<a href="../../search/index.html" onmouseover="changeImages('image1',
'image1on', 'infoimage', 'infoimage1')" onmouseout="changeImages('image1',
'image1off', 'infoimage', 'infoimagedefault')">
<img src="search-off.gif" name="image1"
alt="Search" align="right" width="100"
height="50">
</a>

</td>

<td width="50%" rowspan="2">

<img src="html.gif" name="infoimage" alt="Info" width="200" height="100">

</td>
</tr>
<tr>
<td width="50%">

<a href="../../basics/index.html" onmouseover="changeImages('image2',
'image2on', 'infoimage', 'infoimage2')" onmouseout="changeImages('image2',
'image2off', 'infoimage', 'infoimagedefault')">
<img src="basics-off.gif" name="image2"
alt="Basics" align="right" width="100"
height="50">
</a>

</td>
</tr>
</table>

< back to advanced : javascript page


Reference - Reference

Home : Reference

Tag Encyclopedia - Find out information on HTML tags.

Color Codes - Get the HEX value for colors.

Special Characters - Put special characters on your web pages.

Coming soon:
CSS Encyclopedia


Reference - Colors

Home : Reference : Color Codes

#000000 #000000 | #000033 #000033 | #000066 #000066 | #000099 #000099 | #0000cc #0000cc | #0000ff #0000ff
#003300 #003300 | #003333 #003333 | #003366 #003366 | #003399 #003399 | #0033cc #0033cc | #0033ff #0033ff
#006600 #006600 | #006633 #006633 | #006666 #006666 | #006699 #006699 | #0066cc #0066cc | #0066ff #0066ff
#009900 #009900 | #009933 #009933 | #009966 #009966 | #009999 #009999 | #0099cc #0099cc | #0099ff #0099ff
#00cc00 #00cc00 | #00cc33 #00cc33 | #00cc66 #00cc66 | #00cc99 #00cc99 | #00cccc #00cccc | #00ccff #00ccff
#00ff00 #00ff00 | #00ff33 #00ff33 | #00ff66 #00ff66 | #00ff99 #00ff99 | #00ffcc #00ffcc | #00ffff #00ffff
#330000 #330000 | #330033 #330033 | #330066 #330066 | #330099 #330099 | #3300cc #3300cc | #3300ff #3300ff
#333300 #333300 | #333333 #333333 | #333366 #333366 | #333399 #333399 | #3333cc #3333cc | #3333ff #3333ff
#336600 #336600 | #336633 #336633 | #336666 #336666 | #336699 #336699 | #3366cc #3366cc | #3366ff #3366ff
#339900 #339900 | #339933 #339933 | #339966 #339966 | #339999 #339999 | #3399cc #3399cc | #3399ff #3399ff
#33cc00 #33cc00 | #33cc33 #33cc33 | #33cc66 #33cc66 | #33cc99 #33cc99 | #33cccc #33cccc | #33ccff #33ccff
#33ff00 #33ff00 | #33ff33 #33ff33 | #33ff66 #33ff66 | #33ff99 #33ff99 | #33ffcc #33ffcc | #33ffff #33ffff
#660000 #660000 | #660033 #660033 | #660066 #660066 | #660099 #660099 | #6600cc #6600cc | #6600ff #6600ff
#663300 #663300 | #663333 #663333 | #663366 #663366 | #663399 #663399 | #6633cc #6633cc | #6633ff #6633ff
#666600 #666600 | #666633 #666633 | #666666 #666666 | #666699 #666699 | #6666cc #6666cc | #6666ff #6666ff
#669900 #669900 | #669933 #669933 | #669966 #669966 | #669999 #669999 | #6699cc #6699cc | #6699ff #6699ff
#66cc00 #66cc00 | #66cc33 #66cc33 | #66cc66 #66cc66 | #66cc99 #66cc99 | #66cccc #66cccc | #66ccff #66ccff
#66ff00 #66ff00 | #66ff33 #66ff33 | #66ff66 #66ff66 | #66ff99 #66ff99 | #66ffcc #66ffcc | #66ffff #66ffff
#990000 #990000 | #990033 #990033 | #990066 #990066 | #990099 #990099 | #9900cc #9900cc | #9900ff #9900ff
#993300 #993300 | #993333 #993333 | #993366 #993366 | #993399 #993399 | #9933cc #9933cc | #9933ff #9933ff
#996600 #996600 | #996633 #996633 | #996666 #996666 | #996699 #996699 | #9966cc #9966cc | #9966ff #9966ff
#999900 #999900 | #999933 #999933 | #999966 #999966 | #999999 #999999 | #9999cc #9999cc | #9999ff #9999ff
#99cc00 #99cc00 | #99cc33 #99cc33 | #99cc66 #99cc66 | #99cc99 #99cc99 | #99cccc #99cccc | #99ccff #99ccff
#99ff00 #99ff00 | #99ff33 #99ff33 | #99ff66 #99ff66 | #99ff99 #99ff99 | #99ffcc #99ffcc | #99ffff #99ffff
#cc0000 #cc0000 | #cc0033 #cc0033 | #cc0066 #cc0066 | #cc0099 #cc0099 | #cc00cc #cc00cc | #cc00ff #cc00ff
#cc3300 #cc3300 | #cc3333 #cc3333 | #cc3366 #cc3366 | #cc3399 #cc3399 | #cc33cc #cc33cc | #cc33ff #cc33ff
#cc6600 #cc6600 | #cc6633 #cc6633 | #cc6666 #cc6666 | #cc6699 #cc6699 | #cc66cc #cc66cc | #cc66ff #cc66ff
#cc9900 #cc9900 | #cc9933 #cc9933 | #cc9966 #cc9966 | #cc9999 #cc9999 | #cc99cc #cc99cc | #cc99ff #cc99ff
#cccc00 #cccc00 | #cccc33 #cccc33 | #cccc66 #cccc66 | #cccc99 #cccc99 | #cccccc #cccccc | #ccccff #ccccff
#ccff00 #ccff00 | #ccff33 #ccff33 | #ccff66 #ccff66 | #ccff99 #ccff99 | #ccffcc #ccffcc | #ccffff #ccffff
#ff0000 #ff0000 | #ff0033 #ff0033 | #ff0066 #ff0066 | #ff0099 #ff0099 | #ff00cc #ff00cc | #ff00ff #ff00ff
#ff3300 #ff3300 | #ff3333 #ff3333 | #ff3366 #ff3366 | #ff3399 #ff3399 | #ff33cc #ff33cc | #ff33ff #ff33ff
#ff6600 #ff6600 | #ff6633 #ff6633 | #ff6666 #ff6666 | #ff6699 #ff6699 | #ff66cc #ff66cc | #ff66ff #ff66ff
#ff9900 #ff9900 | #ff9933 #ff9933 | #ff9966 #ff9966 | #ff9999 #ff9999 | #ff99cc #ff99cc | #ff99ff #ff99ff
#ffcc00 #ffcc00 | #ffcc33 #ffcc33 | #ffcc66 #ffcc66 | #ffcc99 #ffcc99 | #ffcccc #ffcccc | #ffccff #ffccff
#ffff00 #ffff00 | #ffff33 #ffff33 | #ffff66 #ffff66 | #ffff99 #ffff99 | #ffffcc #ffffcc | #ffffff #ffffff


Reference - Characters

Home : Reference : Special Characters

You can put special characters (character that aren't on your keyboard) into web pages two different ways. You can use the "HTML token" exactly as written in this list, or you can use the "Dec" number for that character.

To put the word "résumé" on a web page you can do one of the following:

r&eacute;sum&eacute;

or

r&#233;sum&#233;

Number
(Hex/Dec/Oct)  Character    HTML Token
3c/060/074     <            &lt;
3e/062/076     >            &gt;
80/128/200     €
81/129/201     
82/130/202     ‚
83/131/203     ƒ
84/132/204     „
85/133/205     …
86/134/206     †
87/135/207     ‡
88/136/210     ˆ
89/137/211     ‰
8a/138/212     Š
8b/139/213     ‹
8c/140/214     Œ
8d/141/215     
8e/142/216     Ž
8f/143/217     
90/144/220     
91/145/221     ‘
92/146/222     ’
93/147/223     “
94/148/224     ”
95/149/225     •
96/150/226     –
97/151/227     —
98/152/230     ˜
99/153/231     ™
9a/154/232     š
9b/155/233     ›
9c/156/234     œ
9d/157/235     
9e/158/236     ž
9f/159/237     Ÿ
a0/160/240
a1/161/241     ¡
a2/162/242     ¢
a3/163/243     £
a4/164/244     ¤
a5/165/245     ¥
a6/166/246     ¦
a7/167/247     §
a8/168/250     ¨
a9/169/251     ©            &copy;
aa/170/252     ª
ab/171/253     «
ac/172/254     ¬
ad/173/255
ae/174/256     ®            &reg;
af/175/257     ¯
b0/176/260     °
b1/177/261     ±
b2/178/262     ²
b3/179/263     ³
b4/180/264     ´
b5/181/265     µ
b6/182/266     ¶
b7/183/267     ·
b8/184/270     ¸
b9/185/271     ¹
ba/186/272     º
bb/187/273     »
bc/188/274     ¼
bd/189/275     ½
be/190/276     ¾
bf/191/277     ¿
c0/192/300     À            &Agrave;
c1/193/301     Á            &Aacute;
c2/194/302     Â            &Acirc;
c3/195/303     Ã            &Atilde;
c4/196/304     Ä            &Auml;
c5/197/305     Å            &Aring;
c6/198/306     Æ            &AElig;
c7/199/307     Ç            &Ccedil;
c8/200/310     È            &Egrave;
c9/201/311     É            &Eacute;
ca/202/312     Ê            &Ecirc;
cb/203/313     Ë            &Euml;
cc/204/314     Ì            &Igrave;
cd/205/315     Í            &Iacute;
ce/206/316     Î            &Icirc;
cf/207/317     Ï            &Iuml;
d0/208/320     Ð            &ETH;
d1/209/321     Ñ            &Ntilde;
d2/210/322     Ò            &Ograve;
d3/211/323     Ó            &Oacute;
d4/212/324     Ô            &Ocirc;
d5/213/325     Õ            &Otilde;
d6/214/326     Ö            &Ouml;
d7/215/327     ×
d8/216/330     Ø            &Oslash;
d9/217/331     Ù            &Ugrave;
da/218/332     Ú            &Uacute;
db/219/333     Û            &Ucirc;
dc/220/334     Ü            &Uuml;
dd/221/335     Ý            &Yacute;
de/222/336     Þ            &THORN;
df/223/337     ß            &szlig;
e0/224/340     à            &agrave;
e1/225/341     á            &aacute;
e2/226/342     â            &acirc;
e3/227/343     ã            &atilde;
e4/228/344     ä            &auml;
e5/229/345     å            &aring;
e6/230/346     æ            &aelig;
e7/231/347     ç            &ccedil;
e8/232/350     è            &egrave;
e9/233/351     é            &eacute;
ea/234/352     ê            &ecirc;
eb/235/353     ë            &euml;
ec/236/354     ì            &igrave;
ed/237/355     í            &iacute;
ee/238/356     î            &icirc;
ef/239/357     ï            &iuml;
f0/240/360     ð            &eth;
f1/241/361     ñ            &ntilde;
f2/242/362     ò            &ograve;
f3/243/363     ó            &oacute;
f4/244/364     ô            &ocirc;
f5/245/365     õ            &otilde;
f6/246/366     ö            &ouml;
f7/247/367     ÷
f8/248/370     ø            &oslash;
f9/249/371     ù            &ugrave;
fa/250/372     ú            &uacute;
fb/251/373     û            &ucirc;
fc/252/374     ü            &uuml;
fd/253/375     ý            &yacute;
fe/254/376     þ            &thorn;
ff/255/377


Reference - Tags - Tags

Home : Reference : Tag Encyclopedia

Structure - The main tags that set up the structure of a HTML file.

Text Blocks - Tags that divide text and format text into blocks.

Text Formatting - Change the appearance of text.

Lists - Information on making ordered and unordered lists.

Tables - All of the tags that are used to make tables.

Frames - Make your site easy to navigate.

Style Sheets - Tags that give you more control over the appearance of your site.

Embedded Objects - Insert special objects and applets into your pages

Forms - Tags that make forms possible.

Scripts - HTML tags that use scripts.


Reference - Tags - Embedded Objects

Home : Reference : Tag Encyclopedia : Embedded Objects

Applet

<APPLET ALIGN="left/right/center/justify" ALT="text"
  ARCHIVE="resources" CODE="class"
  CODEBASE="URL" HEIGHT="value"
  HSPACE="horiz. space" NAME="name"
  OBJECT="file" VSPACE="vert. space"
  WIDTH="value"></APLLET>

Includes a Java applet. This is deprecated in favor of the object element. Archive identifies the resources to be preloaded. Code defines the applet class file. Codebase is the URL base for the applet. The serialized applet file is the object.

Area

<AREA SHAPE="rect,circle,poly" COORDS="coords"
  HREF="url" TARGET="name"
  ALT="text" TABINDEX="number">

This element is used to define links and anchors. To see an example of the area tag being used, look at using Imagemaps in the advanced area. Shape defines the shape of the area. The coordinates of the shape are listed in coords. The href points to a URL which will be displayed in the target window. Tabindex sets the tabbing order between the elements.

Image

<IMG SRC="url" ALT="text"
  HEIGHT="value" WIDTH="value"
  USEMAP="url" ALIGN="left,right,center,justify"
  border="width">

This tag is used to insert an image onto your web page. For an example of it being used, look in the images page in the basics area. Src specifies the location of the image. The alternate text display for the picture is defined by alt. If the image will be using an imagemap, you need to put the location of the map in usemap.

Map

<MAP NAME="name">Image map info</MAP>

When used with the area element, this creates a client-side imagemap.

Object

<OBJECT CLASSID="url" CODEBASE="url"
  DATA="url" CODETYPE="content type"
  STANDBY="loading message" HEIGHT="value"
  WIDTH="width" USEMAP="url"
  NAME="url" TABINDEX="number"
  ALIGN="left,center,right,justify" BORDER="width">Object
  Information</object>

Includes an object.  Classid defines the URL of the objects location. The URL for resolving URLs specified by other attributes is codebase. Data sets the URL to the object's data. Type defines the Internet content type for the code. The message shown while the object is loading is standby. Usemap sets the URL to an imagemap. Name defines the URL to submit as part of a form. Tabindex sets the tabbing order between elements with a defined tabindex.


Reference - Tags - Forms

Home : Reference : Tag Encyclopedia : Forms

Form

<FORM ACTION=action base> form tags </FORM>
<FORM METHOD=method> form tags </FORM>
<FORM ENCTYPE=media type> form tags </FORM>
<FORM ACTION=action base TARGET="target window name"> form tags </FORM>
<FORM SCRIPT=URL> form tags </FORM>

The form tag introduces a form, which is made up of INPUT elements, described in the sections that follow. A form may be inside structural HTML tags and may also contain structural tags. Using tables and other elements a form can take on various shapes and looks. If you are using a free service to host your site, make sure you check the service's website to see what forms they allow. Many times the service has a special way to put a form on your web page.

The ACTION attribute defaults to the document's base address.

The METHOD attribute can be GET or POST. GET specifies a query form, used to get data from a server. POST specifies a form that gives information to the server and perhaps causes a database to be updated or a message to be sent.

The SCRIPT attribute points to a script to be run. The browser must be able to run the type of script that is specified.

The default media type is 'application/x-www-form-urlencoded', which specifies how the browser puts the user responses on the form together to form a response URL that is then submitted to the server.

If Target is specified then the output document will be loaded into the window specified by "target window name". The following are the predefined target names:

_blank
Will cause the link to be loaded into a new blank window.
_self
Will cause the link to be loaded into the same window the link was in.
_parent
Will cause the link to be loaded into the parent of this document.
_top
Will cause the link to be loaded into the full body of this window.

Form Input Check Box

<INPUT TYPE=CHECKBOX NAME=name VALUE=value>
<INPUT TYPE=CHECKBOX NAME=name VALUE=value CHECKED>

The checkbox type input tag specifies a Boolean choice within the form that contains it. If more than one checkbox appears in the form with the same name the user can select none, one or several of the choices. The NAME attribute is a required field and is used to identify the data for the field. The VALUE attribute specifies the value that is returned if the box is checked. If the CHECKED attribute is specified, the box is initially selected.

Three newer attributes include: DISABLED, ERROR, and ALIGN. The DISABLED attribute shows the field but will not allow the user to modify it. The ERROR attribute is used to supply an error message for the field. The ALIGN attribute is used to position the field and can be one of TOP, BOTTOM, MIDDLE, LEFT or RIGHT.

Example:

Form Input File

<INPUT TYPE=FILE NAME=name ACCEPT=mime type list>

The file type input tag allows the user to attach one or more files to the form for submission. The NAME attribute is a required field and is used to identify the data for the field. The ACCEPT attribute is a list of mime types that will be accepted. (e.g. "image/*" or "image/gif, image/jpeg").

Three newer attributes include: DISABLED, ERROR, and ALIGN. The DISABLED attribute shows the field but will not allow the user to modify it. The ERROR attribute is used to supply an error message for the field. The ALIGN attribute is used to position the field and can be one of TOP, BOTTOM, MIDDLE, LEFT or RIGHT.

Example:

Form Input Hidden

<INPUT TYPE=HIDDEN NAME=name VALUE=value>

The hidden type input tag specifies a hard coded name-value pair within the form. This field is not displayed to the user. Both NAME and VALUE are required attributes.

Three newer attributes include: DISABLED, ERROR, and ALIGN. The DISABLED attribute shows the field but will not allow the user to modify it. The ERROR attribute is used to supply an error message for the field. The ALIGN attribute is used to position the field and can be one of TOP, BOTTOM, MIDDLE, LEFT or RIGHT.

Form Input Image

<INPUT TYPE=IMAGE NAME=name SRC="URL">
<INPUT TYPE=IMAGE NAME=name SRC="URL" ALIGN="alignment">

The image type input tag specifies an image to be presented to the user. As soon as the user clicks on the image, the form is submitted with the selected x y coordinates of the spot on the image and the data for the other form fields. The NAME attribute is a required field and is used to identify the data for the field. The SRC and ALIGN attributes are the same as in the Inline Image tag.

The ALIGN attribute is used for image alignment and can be one of TOP, BOTTOM, MIDDLE, LEFT or RIGHT.

Three newer attributes include: DISABLED, and ERROR. The DISABLED attribute shows the field but will not allow the user to modify it. The ERROR attribute is used to supply an error message for the field.

Form Input Password

<INPUT TYPE=PASSWORD NAME=name>
<INPUT TYPE=PASSWORD NAME=name MAXLENGTH=length>
<INPUT TYPE=PASSWORD NAME=name SIZE=size>
<INPUT TYPE=PASSWORD NAME=name VALUE=value>

The password type input tag specifies a single line text entry field within the form that contains it. The value entered by the user will be obscured as it is entered. The NAME attribute is a required field and is used to identify the data for the field. The MAXLENGTH attribute specifies the number of characters that can be entered into this field. If MAXLENGTH is not specified then there is no limit on the number of characters entered. If MAXLENGTH is longer than SIZE then the text field will scroll appropriately. The SIZE attribute specifies the amount of display space this field should take up. The default for SIZE will vary by browser. The VALUE attribute specifies the initial value of the field.

Three newer attributes include: DISABLED, ERROR, and ALIGN. The DISABLED attribute shows the field but will not allow the user to modify it. The ERROR attribute is used to supply an error message for the field. The ALIGN attribute is used to position the field and can be one of TOP, BOTTOM, MIDDLE, LEFT or RIGHT.

Example:

Form Input Radio Button

<INPUT TYPE=RADIO NAME=name VALUE=value>
<INPUT TYPE=RADIO NAME=name VALUE=value CHECKED>

The radio button type input tag allows a choice among a number of options. Normally more than one radio button will appear in the form with the same name. The user can then select only one of the of the choices. The NAME attribute is a required field and is used to identify the data for the field. If one of the choices has the CHECKED attribute it will initially be selected. If none of the choices has the CHECKED attribute then the first one defaults as initially selected. The VALUE attribute specifies the value that is returned if the box is checked.

Three newer attributes include: DISABLED, ERROR, and ALIGN. The DISABLED attribute shows the field but will not allow the user to modify it. The ERROR attribute is used to supply an error message for the field. The ALIGN attribute is used to position the field and can be one of TOP, BOTTOM, MIDDLE, LEFT or RIGHT.

Example:

Choice 1
Choice 2

Form Input Range

This is not supported in many browsers.

<INPUT TYPE=RANGE NAME=name MIN=min MAX=max>
<INPUT TYPE=RANGE NAME=name MIN=min> MAX=max VALUE=value>

The range type input tag allows the user to enter an number restricted to a set range. The NAME attribute is a required field and is used to identify the data for the field. The MIN and MAX attributes specify the minimum and maximum values that can be entered. If either MIN or MAX is a real number then the user can enter real numbers, otherwise only integers can be entered. The VALUE attribute specifies an initial value and should be in the range specified.

Three newer attributes include: DISABLED, ERROR, and ALIGN. The DISABLED attribute shows the field but will not allow the user to modify it. The ERROR attribute is used to supply an error message for the field. The ALIGN attribute is used to position the field and can be one of TOP, BOTTOM, MIDDLE, LEFT or RIGHT.

Form Input Reset

<INPUT TYPE=RESET>

The reset type input tag specifies a button. When the user clicks the button, all the fields in the form are reset to their initial values.

Three newer attributes include: DISABLED, ERROR, and ALIGN. The DISABLED attribute shows the field but will not allow the user to modify it. The ERROR attribute is used to supply an error message for the field. The ALIGN attribute is used to position the field and can be one of TOP, BOTTOM, MIDDLE, LEFT or RIGHT.

Example:

Choice 1
Choice 2

Form Input Submit

<INPUT TYPE=SUBMIT>
<INPUT TYPE=SUBMIT NAME=name>
<INPUT TYPE=SUBMIT VALUE=value>

The submit type input tag specifies a button. When the user clicks the button, the form is submitted. The NAME attribute is used to identify the data for the field. If no NAME attribute is given then this element does not form part of the submitted response. The VALUE attribute specifies the label for the button.

Three newer attributes include: DISABLED, ERROR, and ALIGN. The DISABLED attribute shows the field but will not allow the user to modify it. The ERROR attribute is used to supply an error message for the field. The ALIGN attribute is used to position the field and can be one of TOP, BOTTOM, MIDDLE, LEFT or RIGHT.

Example:

Form Input Text

<INPUT TYPE=TEXT NAME=name>
<INPUT TYPE=TEXT NAME=name MAXLENGTH=length>
<INPUT TYPE=TEXT NAME=name SIZE=size>
<INPUT TYPE=TEXT NAME=name VALUE=value>

The text type input tag specifies a single line text entry field within the form that contains it. The NAME attribute is a required field and is used to identify the data for the field. The MAXLENGTH attribute specifies the number of characters that can be entered into this field. If MAXLENGTH is not specified then there is no limit on the number of characters entered. If MAXLENGTH is longer than SIZE then the text field will scroll appropriately. The SIZE attribute specifies the amount of display space this field should take up. The default for SIZE will vary by browser. The VALUE attribute specifies the initial value of the field.

Three newer attributes include: DISABLED, ERROR, and ALIGN. The DISABLED attribute shows the field but will not allow the user to modify it. The ERROR attribute is used to supply an error message for the field. The ALIGN attribute is used to position the field and can be one of TOP, BOTTOM, MIDDLE, LEFT or RIGHT.

Example:

Form Select

<SELECT NAME=name> option entries </SELECT>
<SELECT NAME=name MULTIPLE> option entries </SELECT>
<SELECT NAME=name SIZE=size> option entries </SELECT>
<SELECT NAME=name SRC=URL WIDTH=width HEIGHT=height UNITS=units> option entries </SELECT>
<OPTION> content
<OPTION SELECTED> content
<OPTION VALUE=value> content
<OPTION SHAPE=shape>

The select tag specifies a multiple line selection box field within the form that contains it. The user can select one or more lines if the attribute MULTIPLE is specified. The NAME attribute is a required field and is used to identify the data for the field. The SIZE attribute specifies the number of lines of selections that are to be displayed.
The SELECTED attribute of the option tag specifies that the option is to be initially selected. The VALUE attribute specifies the value to be returned if this option is selected. If the VALUE attribute is not specified the content of the option is used.

The select tag's SRC, WIDTH, HEIGHT, and UNITS attributes and the option tag's SHAPE attribute define an image map. These attributes are the same as the ones described in the Figure tag.

Three newer attributes include: DISABLED, ERROR, and ALIGN. The DISABLED attribute shows the field but will not allow the user to modify it. The ERROR attribute is used to supply an error message for the field. The ALIGN attribute is used to position the field and can be one of TOP, BOTTOM, MIDDLE, LEFT or RIGHT.

Example:

Form Text Area

<TEXTAREA NAME=name COLS=# columns ROWS=# rows> content </TEXTAREA>

The text area tag specifies a multiple line text area field within the form that contains it. The NAME attribute is a required field and is used to identify the data for the field. The COLS attribute specifies the width in characters of the text area. The ROWS attribute specifies the number of lines the text area contains. The content is used as an initial value for the field. The field can be scrolled beyond the COLS and ROWS size to allow for larger amounts of text to be entered.

Three newer attributes include: DISABLED, ERROR, and ALIGN. The DISABLED attribute shows the field but will not allow the user to modify it. The ERROR attribute is used to supply an error message for the field. The ALIGN attribute is used to position the field and can be one of TOP, BOTTOM, MIDDLE, LEFT or RIGHT.

Example:


Reference - Tags - Scripts

Home : Reference : Tag Encyclopedia : Scripts

Scripts

<script type="content type" src="url">...</script>

This element contains client-side scripts that are executed by the browser. Type defines the script language Internet content type and the src defines the URL for the external script.

Noscript

<noscript>...</noscript>

This element provides an alternative content for older browsers that cannot run scripts.


Reference - Tags - Frames

Home : Reference : Tag Encyclopedia : Frames

Frame

<frame name="name" src="link.html"
  frameborder="on/off" marginwidth="pixels"
  marginheight="pixels" noresize scrolling="yes/no/auto">

Defines a frame in an HTML file. Name is the name of the frame. The source to be displayed in the frame is defined as src. Frameborder toggles the border between frames (0=off, 1=on). Marginwidth and marginheight sets the space between the frame border and content. Noresize determines if scrolling is allowed (auto, yes, no)

Frameset

<frameset rows="pixels or %" cols="pixels or %"

Defines the layout of frames within a window. A frameset with two columns, the first taking up 25% of the screen and the next taking up the rest is written as <frameset cols="25%,*">. If you wanted three columns you would just add another comma and value for the third column. The value can be defined in pixels, percentages, or * (take of the rest of the space on the screen).

Noframes

<noframes>HTML to be shown</noframes>

Noframes sets the alternative content to be shown when frames are not supported by the browser visiting the page.


Reference - Tags - Lists

Home : Reference : Tag Encyclopedia : Lists

Definition List

<DL> list entries </DL>
<DL COMPACT> list entries </DL>
<DT> term
<DD> definition

The definition list tag introduces a definition list or glossary, which is made up of term (DT) and definition (DD) items. The </DT> and </DD> tags are optional. Typically the definitions are indented under each term, with no blank lines around them. If COMPACT was specified (and the terms are short) the terms and definitions are on the same line. Do not use multiple DD elements for the same DT -- instead use BR within the DD.

A list heading (LH) may be included before the first definition term.

List Item

<LI> text </LI>
<LI SRC=URL> text </LI>
<LI SKIP=number> text </LI>
<LI TYPE=type> text </LI>
<LI VALUE=number> text </LI>

The list item tag defines one entry in an ordered or unordered list. Other tags may be embedded in a list item.

The SRC attribute uses the image specified by the URL as the bullet for this item. The SKIP attribute is used with ordered lists to skip forward in the count.

The TYPE attribute changes the bullet or numbering style for this item. type has the same values as it would in the OL or UL tag. The VALUE attribute resets the sequence number to number.

Ordered List

<OL> list entries </OL>
<OL COMPACT> list entries </OL>
<OL SEQNUM=number> list entries </OL>
<OL CONTINUE> list entries </OL>
<OL START=number> list entries </OL>
<OL TYPE=type> list entries </OL>

The ordered list tag introduces an ordered (numbered) list, which is made up of List Item (LI) tags. The COMPACT attribute instructs the browser to reduce the space occupied by the list. For a bulleted list use UL.

A list heading (LH) may be included before the first list item. The SEQNUM attribute allows the first list item to be number instead of the default 1. The CONTINUE attribute continues the numbering from the previous ordered list.

The START attribute allows the first list item to be number instead of the default 1. The TYPE attribute defines the way items are numbered:

A
A, B, C...
a
a, b, c...
I
I, II, III...
i
i, ii, iii...
1
1, 2, 3...

Unordered List

<UL> list entries </UL>
<UL COMPACT> list entries </UL>
<UL SRC="URL" > list entries </UL>
<UL PLAIN>
<UL WRAP=type>
type > list entries </UL>

The unordered list tag introduces an unordered (bulleted) list, which is made up of List Item (LI) tags. The COMPACT attribute instructs the browser to reduce the space occupied by the list. For a numbered list use OL.

A list heading (LH) may be included before the first list item. The SRC attribute identifies a graphic image to be used as a bullet. The PLAIN attribute specifies not to use a bullet on each item. The WRAP attribute is either VERT or HORIZ, and indicates multiple columns of data. VERT indicates that the data is to go down the page and then wrap to the next column, and HORIZ indicates that the data is to wrap across each row.

The TYPE attribute specifies the bullet type; type can be DISC, CIRCLE, or SQUARE.

  • Normal
  • Disc
  • Circle
  • Square


Reference - Tags - Structure

Home : Reference : Tag Encyclopedia : Structure

Body

<BODY
  BACKGROUND="URL"  BGCOLOR="#rrggbb
  or colorname" TEXT="#rrggbb or colorname"
  LINK="#rrggbb or colorname"  ALINK="#rrggbb"
  or colorname"  VLINK="#rrggbb or
  colorname">document-body</BODY>

MSIE Only: <BODY LEFTMARGIN=margin TOPMARGIN=margin BGPROPERTIES="FIXED"> document-body</BODY>

The body tag introduces the body of the document. It should appear after the head section and occupy the remainder of the document.

The BACKGROUND attribute specifies an image file to use as the background for the page.

The BGCOLOR, TEXT, LINK, ALINK, and VLINK attributes specify the colors to be used for the background, text, links, active links, and visited links respectively. (An link is active for the moment the user clicks on it, and changes color to confirm it has been clicked.) rrggbb is a six digit hexadecimal number with the first two digits specifying the red value, the middle two the green value, and the last two the blue value. Some sample color values:

Color names can be used wherever colors can be used: in the BGCOLOR, TEXT, LINK, ALINK, and VLINK attributes. Valid colors are: Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal,Yellow, and White.

MSIE Only: The LEFTMARGIN and TOPMARGIN attributes set the margin at the left and top of the document, in pixels.

MSIE Only: The BGPROPERTIES attribute causes the background image (set with the BACKGROUND attribute) to remain fixed as the document scrolls: a watermark effect.

Comment

<!-- comment -->

Inserts notes or scripts that are not displayed by the browser. Comments can be as big as needed, and can even include HTML tags if needed.

Division

<DIV ALIGN=align>
<DIV CLASS=class>
<DIV CLASS=class NOWRAP>

The division tag is used to add structure to a block of text. The CLASS attribute specifies what section this is. The ALIGN attribute can be one of LEFT, RIGHT, or CENTER. The NOWRAP attribute stops the browser from wrapping except where <BR>'s are included in the document. This tag can not be used within <P>...</P> tags.

Head

<HEAD> head-section </HEAD>

The head tag introduces text that describes an HTML document. Most documents have only a TITLE tag in the head section. There can only be on <HEAD>...</HEAD> area per HTML file and it must be placed before the <BODY>...</BODY> tags.

HTML

<HTML> entire-document </HTML>

The HTML tag defines an HTML document. The <HTML> tag should be the first in the entire document, and the </HTML> tag should be the last.

Meta

<META HTTP-EQUIV="HTTP header field name" CONTENT="field value">
<META HTTP-EQUIV="HTTP header field name" NAME="field name" CONTENT="field value">

The meta tag, which is only valid in a HEAD section, declares HTTP meta name/value pairs that are associated with the HTML document. These are used to extend the HTTP header information returned by the HTTP server. The support of the meta information is HTTP server specific. If a name attribute is not specified the HTTP-EQUIV attribute is used as the name. This tag can also be used to trigger client side behavior.

Span

<span>text</span>

Organizes the document by defining a span of text.

Title

<TITLE> title-text </TITLE>

The title tag, which is only valid in a HEAD section, defines the title of an HTML document. A title should be chosen that makes sense with no context. Most browsers display document titles in the application's title bar and in bookmark lists.


Reference - Tags - Style

Home : Reference : Tag Encyclopedia : Style Sheets

This document describes tags associated with Cascading Style Sheets.

Style

<style type="value" title="value"

Creates an internal style sheet. Type sets the Internet content type while the title defines the title of the style. For a more comprehensive explanation of CSS, look in the advanced area.


Reference - Tags - Tables

Home : Reference : Tag Encyclopedia : Tables

Caption

<CAPTION> text </CAPTION>
Netscape - <CAPTION ALIGN=alignment> text </CAPTION>
Internet Explorer - <CAPTION ALIGN=alignment> text </CAPTION>
Not supported in Netscape - <CAPTION VALIGN=vertical-alignment> text </CAPTION>

The caption tag defines the caption of a figure or table. It is valid only within FIG or TABLE tags.

Netscape - The ALIGN attribute arranges for the caption to be at the TOP or BOTTOM of the table or figure.

Internet Explorer - The ALIGN attribute sets the alignment of the caption within the table or figure border. It can be LEFT, RIGHT, or CENTER.

The VALIGN attribute arranges for the caption to be at the TOP or BOTTOM of the table or figure.

Table

<TABLE attributes> table-content </TABLE>

A table consists of an optional caption (CAPTION) and one or more rows (TR.) The attributes are:

ALIGN="alignment"
This causes the table to be aligned in one of a variety of ways on the page. Here "alignment" should be one of
  • LEFT: To the left text margin
  • CENTER: In the centre of the page (Turns on NOFLOW.)
  • RIGHT: To the right text margin
  • BLEEDRIGHT: To the rightmost edge of the window
  • BLEEDLEFT: To the leftmost edge of the window
  • JUSTIFY: To both text margins (The table size is adjusted. Turns on NOFLOW.)

    • Note that this does not affect the alignment of the table entries.

    WIDTH=number
    The UNITS attribute is used to translate number.
    BORDER
    This attribute causes the table to be drawn with a border.
    BORDER=number
    This attribute draws the table with a border number pixels thick.
    CELLPADDING=number
    This separates the cell borders and the text with a padding of number pixels.
    CELLSPACING=number
    This separates cells with a gutter of number pixels.
    MSIE only - BGCOLOR="#rrggbb"
    BGCOLOR="colorname"
    This attribute sets the background colour for the entire table.
    MSIE only - BORDERCOLOR="#rrggbb"
    BORDERCOLOR="colorname"
    This attribute sets the border colour for the entire table.
    MSIE only - BORDERCOLORLIGHT="#rrggbb"
    BORDERCOLORLIGHT="colorname"
    This attribute sets the border highlight colour for the entire table.
    MSIE only - BORDERCOLORDARK="#rrggbb"
    BORDERCOLORDARK="colorname"
    This attribute sets the border shadow colour for the entire table.
    MSIE only - VALIGN="valign"
    This attribute sets the vertical alignment for the entire table. "valign"is TOP or BOTTOM.
    CLEAR=clear
    Here "clear" should be one of LEFT, RIGHT, or ALL and specifies which margin should be clear.
    NOFLOW
    This attribute prevents text flow around the table and is equivalent to setting the CLEAR attribute on the element after the table.
    COLSPEC=colspec
    Here colspec is a list of column alignments and widths, separated by spaces. There should be one entry for each column in the table, and each should be an optional capital letter for alignment (one of L (left,) R (right,) C (centre,) J (justify,) or D (decimal)) followed immediately by a number describing the width.
    UNITS=units
    This makes sense only if the COLSPEC or WIDTH attributes are being used and specifies the units to be used for the column or table widths. units should be one of
  • en: widths are in en spaces, proportional to font size
  • relative: column widths are percentage of entire table width, table width is percentage of entire window width
  • pixels: widths are in pixels
    • DP="character"
    Here "character" is the character (the default is ".") to be used in aligning for decimal point alignment.
    NOWRAP
    This attribute prevents word wrap within table entries.

    In the attributes above that refer to it, rrggbb is a six digit hexadecimal number with the first two digits specifying the red value, the middle two the green value, and the last two the blue value. Some sample colour values:

    Microsoft Explorer supports the use of colour names in the BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT, and BORDERCOLORDARK attributes. Valid colours are: Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal,Yellow, and White.

    Table Data

    <TD attributes>

    Valid only in a TR, the table data tag defines a table cell. The attributes are:

    COLSPAN="number"
    the number of columns this cell occupies.
    ROWSPAN="number"
    the number of rows this cell occupies.
    NOWRAP
    This attribute prevents word wrap within the cell.
    ALIGN="align"
    governs the alignment of the text within the table cell. "align" can be LEFT, RIGHT or CENTER.
    VALIGN="align"
    governs the alignment of the text within the table cell. "align" can be TOP, MIDDLE, BOTTOM, or BASELINE.
    MSIE only -BGCOLOR="#rrggbb"
    BGCOLOR="colorname"
    This attribute sets the background colour for the table cell.
    MSIE only -BORDERCOLOR="#rrggbb"
    BORDERCOLOR="colorname"
    This attribute sets the border colour for the table cell.
    MSIE only -BORDERCOLORLIGHT="#rrggbb"
    BORDERCOLORLIGHT="colorname"
    This attribute sets the border highlight colour for the table cell.
    MSIE only -BORDERCOLORDARK="#rrggbb"
    BORDERCOLORDARK="colorname"
    This attribute sets the border shadow colour for the table cell.

    In the attributes above that refer to it, rrggbb is a six digit hexadecimal number with the first two digits specifying the red value, the middle two the green value, and the last two the blue value. Some sample colour values:

    Microsoft Explorer supports the use of colour names in the BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT, and BORDERCOLORDARK attributes. Valid colours are: Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal,Yellow, and White.

    Table Header

    <TH attributes>

    Valid only in a TR, the table header tag defines a header cell. The attributes are:

    COLSPAN="number"
    the number of columns this header occupies.
    ROWSPAN="number"
    the number of rows this header occupies.
    NOWRAP
    This attribute prevents word wrap within the cell.
    ALIGN="align"
    governs the alignment of the text within the table cell. "align" can be LEFT, RIGHT or CENTER. Table Header cells default to centred.
    VALIGN="align"
    governs the alignment of the text within the table cell. "align" can be TOP, MIDDLE, BOTTOM, or BASELINE.
    MSIE only -BGCOLOR="#rrggbb"
    BGCOLOR="colorname"
    This attribute sets the background colour for the header cell.
    MSIE only -BORDERCOLOR="#rrggbb"
    BORDERCOLOR="colorname"
    This attribute sets the border colour for the header cell.
    MSIE only -BORDERCOLORLIGHT="#rrggbb"
    BORDERCOLORLIGHT="colorname"
    This attribute sets the border highlight colour for the header cell.
    MSIE only -BORDERCOLORDARK="#rrggbb"
    BORDERCOLORDARK="colorname"
    This attribute sets the border shadow colour for the header cell.

    In the attributes above that refer to it, rrggbb is a six digit hexadecimal number with the first two digits specifying the red value, the middle two the green value, and the last two the blue value. Some sample colour values:

    Microsoft Explorer supports the use of colour names in the BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT, and BORDERCOLORDARK attributes. Valid colours are: Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal,Yellow, and White.

    Table Row

    <TR attributes>

    Valid only in a TABLE, the table row tag defines a row of cells that are defined with TH and TD tags. The attributes are:

    ALIGN="align"
    governs the alignment of the text within the table cell. "align" can be LEFT, RIGHT or CENTER.
    VALIGN="align"
    governs the alignment of the text within the table cell. "align" can be TOP, MIDDLE, BOTTOM, or BASELINE.
    MSIE only -BGCOLOR="#rrggbb"
    BGCOLOR="colorname"
    This attribute sets the background colour for the table row.
    MSIE only -BORDERCOLOR="#rrggbb"
    BORDERCOLOR="colorname"
    This attribute sets the border colour for the table row.
    MSIE only -BORDERCOLORLIGHT="#rrggbb"
    BORDERCOLORLIGHT="colorname"
    This attribute sets the border highlight colour for the table row.
    MSIE only -BORDERCOLORDARK="#rrggbb"
    BORDERCOLORDARK="colorname"
    This attribute sets the border shadow colour for the table row.
    CLASS="class"
    class is one of Header, Body, or Footer and allows the browser to arrange for header or footer rows to be displayed as the user scrolls through the document.

    Valid only in a TABLE, the table row tag defines a row of cells that are defined with TH and TD tags. The class attribute can be set to one of Header, Body, or Footer to arrange for header or footer rows to be displayed as the user scrolls through the document.

    MSIE only - The ALIGN attribute governs the alignment of the cells within the table rows. "align" can be LEFT or RIGHT. If ALIGN is specified for any cell in the row, the cell alignment overrides the row alignment.


Reference - Tags - Text Blocks

Home : Reference : Tag Encyclopedia : Text Blocks

Block Quote

<BLOCKQUOTE> text </BLOCKQUOTE>
<BQ> text </BQ>
<BQ CLEAR = attributes> text </BQ>
<BQ NOWRAP> text </BQ>

The block quote tag defines text that is quoted from elsewhere. Many browsers (including Netscape) display it in an indented block surrounded by blank lines.

Center

<CENTER> text</CENTER>

The center tag defines text that should be centered.

Headings 1, 2, 3, 4, 5, 6

<H1> text </H1>
<H1 ALIGN=alignment >

The style of these headings will change depending on which browser you view them in.

The heading 1 tag defines a level 1 heading. It is typically shown in a very large bold font with several blank lines around it.

The heading 2 tag defines a level 2 heading. It is typically shown in a large bold font with several blank lines around it.

The heading 3 tag defines a level 3 heading. It is typically shown in a large italic font, slightly indented, with blank lines around it.

The heading 4 tag defines a level 4 heading. It is typically shown in a bold font, indented more than an level 3 heading, with blank lines around it.

The heading 5 tag defines a level 5 heading. It is typically shown in an italic font, indented the same as a level 4 heading, with a blank line above it.

The heading 6 tag defines a level 6 heading. It is typically shown in a normal font, indented more than a level 5 heading, with a blank line above it.

Examples:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Horizontal Rule

<HR>
<HR SIZE= thickness>
<HR WIDTH= width (pixels or percent)>
<HR ALIGN= alignment%>
IE Only! <HR COLOR="colorname">

The horizontal rule tag causes a horizontal line to be drawn across the screen. There is no </HR> tag.

Line Break

<BR>
  <BR CLEAR>
  <BR CLEAR="type">

The line break tag breaks the current line of text. It's not necessary inside a PRE element. There is no </BR> tag. The CLEAR attribute type can be LEFT to break until there is nothing to the left, RIGHT for the right side, all for break until both sides are clear, and NONE for a normal break.

Paragraph

<P> text
<P> text </P>
<P ALIGN=alignment> text
<P NOWRAP> text

The paragraph tag starts a new paragraph, equivalent to two BR tags. The </P> tag is optional if the tag is only to insert space between two paragraphs, but vital when attributes (for example, ALIGN="center") are to apply to the whole paragraph. The ALIGN attribute can be one of LEFT, RIGHT, or CENTER. The NOWRAP attribute will make it so lines are only broken at the <BR> tag.

Plain Text

<PLAINTEXT> text </PLAINTEXT>

The plain text tag defines text that should be shown in a fixed width font with the line breaks and other white space specified by the page author. There is no need to use <BR> tags to indicate line breaks -- line breaks in the source will be displayed by the browser. In addition multiple spaces will be displayed as multiple spaces. HTML tags are not rendered..

Preformatted Text

<PRE> text </PRE>
<PRE WIDTH=width> text </PRE>

The preformatted text tag defines text that should be shown in a fixed width font with the line breaks and other white space specified by the page author. There is no need to use <BR> tags to indicate line breaks -- line breaks in the source will be displayed by the browser. In addition multiple spaces will be displayed as multiple spaces. Typically used for several lines of program code. The width attribute specifies the maximum number of characters per line.


Reference - Tags - Text Formatting

Home : Reference : Tag Encyclopedia : Text Formatting

Address

<ADDRESS> text </ADDRESS>

The address tag defines text that gives an address or other contact information. It is typically displayed in italics, slightly indented.

Big Text

<BIG> text </BIG>

The big text tag defines text that should be displayed in a larger font than usual.

Bold

<B> text </B>

The bold tag defines text that should be shown in boldface.

Citation

<CITE> text </CITE>

The citation tag defines text that cites a book or other work -- most browsers will display it in italics.

Code

<CODE> text </CODE>

The code tag defines text that should be shown in a fixed width font. Many browsers use the same font for the KBD, SAMP, TT and CODE tags. For many lines of fixed width text, with the line breaks and other white space specified by the page author, use the PRE tag.

Definition

This tag is NOT supported by Netscape.

<DFN> text </DFN>

The definition tag defines text that defines a term -- many browsers will display it in italics, though others will ignore it.

Emphasized

<EM> text </EM>

The emphasized tag defines text that should be emphasized -- most browsers will display it in italics.

Font

<FONT SIZE=number COLOR="#RRGGBB or name" FACE="facename"> text </font>

The font tag defines text with a smaller or larger font than usual. The normal font size corresponds to 3; smaller values of number will produce a smaller font, and larger values of number will produce a larger font. If number has a sign (for example +1), the font will be changed relative to the default.

The COLOR attribute allows you to change the color of the text. rrggbb is a six digit hexadecimal number with the first two digits specifying the red value, the middle two the green value, and the last two the blue value.

Color names can also be used in the COLOR attribute. Valid colors are: Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, Yellow, and White.

The FACE attribute specifies the face to be used, such as Arial or Courier. If multiple names are specified, the first one listed that is installed on the client machine is used.

Italic

<I> text </I>

The italic tag defines text that should be shown in italics.

Keyboard

<KBD> text </KBD>

The keyboard tag defines text that should be shown in a fixed width font. This is very similar to the KBD, SAMP, TT, and CODE tags.

Sample

<SAMP> text </SAMP>

The sample tag defines text that should be shown as literal characters in a fixed width font. This is very similar to the KBD, SAMP, TT, and CODE tags.

Small Text

<SMALL> text </SMALL>

The small text tag defines text that should be displayed in a smaller font than usual.

Strikethrough

<STRIKE> text </STRIKE>

The strikethrough tag defines text that should be shown with a horizontal line through it. Example

Strong

<STRONG> text </STRONG>

The strong tag defines text that should be strongly emphasized -- most browsers will display it in boldface.

Subscript

<SUB> text </SUB>

The subscript tag defines text that should be displayed in a smaller font than usual, lower on the line than usual. Example

Superscript

<SUP> text </SUP>

The superscript tag defines text that should be displayed in a smaller font than usual, higher on the line than usual. Example

Teletype

<TT> text </TT>

The teletype tag defines text that should be shown in a fixed width font. This is very similar to the KBD, SAMP, TT, and CODE tags.

Underlined

SOME versions of Netscape do not support this tag!

<U> text </U>

The underlined tag defines text that should be shown with a line underneath it. This should be used rarely, underlined text is very easily confused with links. Example

Variable

<VAR> text </VAR>

The variable tag defines text that represents a variable-- most browsers will display it in italics.


Links

Home : Links

Utilities - A comprehensive list of FREE programs and services that help make web design and computing a lot easier.

References - Links to other sites that explain HTML.

Online Services - Free services and places to host your web site.

Browsers - Download a different browser, or upgrade your existing one.

Java/JavaScript - Links to Java resources.

CGI/Scripting - Links to learn more about scripting and how to add them to your site.

If you want to link to this site, you can use the following image with your link:


Links - Browsers

Home : Links : Browsers

As a web designer, it is important to see what you web page looks like on different browsers. There can be dramatic differences on the appearance of a page between two different browsers. If you take web design seriously, I recommend installing a few web browsers on your computer.

Microsoft Internet Explorer - Currently the most popular web browser used on the internet.

Netscape Navigator - Not as popular as Internet Explorer, but is still widely used on the net.

Lynx - Use this browser to see what your web site looks like as text-only. This is used very rarely today.


Links - Java

Home : Links : Java/JavaScript

Thinking in Java - A huge book written by Bruce Eckel that explains Java better than you could ever want to know. It is free and downloadable in HTML, Word, and PDF formats. This book over 1,000 pages long in Microsoft Word format.

Sun Microsystems


Links - Reference

Home : Links : Reference

Builder.com - A service of CNET - The site for site builders.

Webmonkey - A service of HotBot - An excellent web developers resource.

Microsoft Sitebuilder

WWW Consortium

HTML Help

Project Cool's Developer Zone

Web Developer - Site building resources.

Web Design for Designers - A comprehensive site about web design.

Web Reference - The webmaster's reference library: web design tips and tutorials.

EchoEcho.com - Complete tutorials and web site development information.

Page Resource - A Web Development Tutorial & Information Site.

JavaBoutique - Free Java applets, games, programming tutorials and downloads.

W3 HTML 4.0 Specification - More than you could ever want to know about HTML tags.

W3 CSS Specification - Information on Cascading Style Sheets.

Cut-N-Paste JavaScript - Over 200 free Javascripts.

Devsearch -The first search engine created for the people who make the web.

HTML Help - This offers material on a wide range of HTML related topics.

Copyright Information - Make sure you keep your works safe and that you do not break any copyright laws.


Links - Services

Home : Links : Online Services

Freeservers.com - An excellent and easy to use free web site hosting company. (It's the company that currently hosts this wonderful site!)

Geocities.com - A good free service that a lot of people choose to use. It is probably the most used free hosting site on the net. It just recently got bought by Yahoo.

Tripod.com - Another popular site for free web pages.

SearchButton.com - This site lets you add a totally free search engine for your site.

Atomz.com - This site lets you add a totally free search engine for your site.

Favicons.com - Set up your site so people will see a special icon next to your site when the bookmark it.

Regular Hosting Services:

HalfPriceHosting.com

TwinCitiesHosting.com

Domain Name Registration:

Network Solutions

Registrar.com

Many more domain registration services can be found by any search engine.


Links - Utilities - Index

Home : Links : Utilities

HTML Editors - Tired of using a regular text editor to write HTML? Here are a list of excellent free programs to help you out.

FTP - Download a free FTP client so you can up load your web pages easier and faster.

Graphics - Learn about editors and some free utilities to help you design graphics. You can even make imagemaps a breeze with a free download.

Advertising - Some utilities that will help you get noticed on search engines and on the net.

Download Accelerator Plus - SpeedBit
This totally free program (advertisements are shown in the program's window) uses a few nifty techniques that can dramatically reduce downloading time. It supports resume so if you get disconnected, you can start downloading where you stopped. If you like to make downloads late at night, you can even set it to disconnect after its finished.
Home Page
Download size: 927KB
Download time (28.8 modem): 5 min.

Pegasus Mail - David Harris
A very powerful and completely free email client. It works great for POP3 accounts and networks instead of using Microsoft Outlook, Microsoft Outlook Express, or Netscape's email client.
Home Page
Download size: 3.26MB
Download time (28.8 modem): 18 min.

Rain - Leading Wintech
This small utility runs in the background making your CPU run much cooler.
Home Page
Download size: 120KB
Download time (28.8 modem): <1min.

Power Archiver - eFront, Inc.
A great program to manage your ZIP archives. This is a great alternative to WinZip (which always nags you to register it). PowerArchiver is easy to use, it's FREE and it has more features than most other archive programs.
Home Page
Download size: 1.88MB
Download time (28.8 modem): 9min.

Copernic - Copernic Technologies, Inc.
Copernic 2000 is an intelligent agent that carries out your net-searches by simultaneously consulting the most important search engines of the Internet. The program that is free to download is completely functional, but to use some options you have to buy a registered version.
Home Page
Download size: 2.62MB
Download time (28.8 modem): 13min.

Cacheman - Outer Technologies, Inc.
Cacheman is a utility which tweaks the disk cache settings and prevents frequent swapping of the data to disk resulting in an improved performance and stability. This program fixes the problems with Windows memory management and doesn't even have to be running in the background to do it. It can dramatically free up memory on your computer.
Home Page
Download size: 500KB
Download time (28.8 modem): 3min.

File Shredder - Kazushi Oenoki
Have a file that is too large to fit on one floppy disk? Use this small, free and effective utitlity to chop up your files into manageable pieces. You do not even have to have the program on the recieving computer (like most disk spanning programs)
Home Page
Download size: 650KB
Download time (28.8 modem): 3min.


Links - Utilities - Editors

Home : Links : Utilities : HTML Editors

These are some excellent and totally free HTML editors. They all have different features, but all of them are very easy to use and have syntax highlighting so all of your tags are highlighted. These programs make writing HTML a much more pleasant experience.

1st Page 2000 - Evrsoft
The best 100% free HTML text editor that I can find. It includes different interfaces for the beginner, normal, advanced, and hardcore web designers. It also includes customizable toolbars, 450+ JavaScripts (image rollovers are a snap), spell checking while you type, thesaurus, tag library, and wizards.
Home Page
Download size: 5.2 Mb
Download time (28.8 modem): 27 min.

Arachnophilia - Paul Lutus
 This is a small but powerful program to help you write HTML. Features include: Customizable toolbar, macros, low system requirements, powerful replace and find features. Arachnophilia allows you to open hundreds of files simultaneously (memory permitting) because of its low system requirements. With many files open, you can quickly search all of them for words/tags. You can also replace words/tags in many files very quickly.
Home Page
Download size: 1.3 Mb
Download time (28.8 modem): 7 min.

HomeSite
 HomeSite is an incredible HTML editor that works very well. If you are willing to pay for it, visit their web page. If you want an older version that is free you can download that instead.
Home page
Download older & FREE version here
Download size: 503 Kb
Download time (28.8 modem): 3 min.


Links - Utilities - Ftp

Home : Links : Utilities : FTP

LeechFTP - Jan Debis
An excellent free FTP program. This program is very advanced and has many options. Its key feature is multithreading for simultaneous transfers, which is hard to find in a free FTP client.
Home Page
Download size: 620 Kb
Download time (28.8 modem): 3 min.

FTP Works - Corban Software
 This simple program performs common FTP functions reliably. It is a good, solid, easy to use, and free FTP program. Most FTP clients you purchase have more functionality than needed. This client can do everything for the basic web designer.
Home Page
 Download size: 756 Kb
Download time (28.8 modem): 4 min.


Links - Utilities - Graphics

Home : Links : Utilities : Graphics

In addition to a good graphics program like JASC's Paint Shop Pro, there are a few other utilities that help you make graphics and use them in your web pages.

Microsoft GIF Animator - Microsoft
This program allows you to make simple animated GIF's to put on your web site. You will need a graphics program to make the individual GIF images, this program only combines images as frames of an animation.
Home Page
Download Here
 Download size: 1.08 Mb
Download time (28.8 modem): 6 min.

CuteMAP - GlobalSCAPE
 CuteMAP lets you easily make imagemaps by clicking directly on the image. You can quickly make circles, rectangles and polygons to link to different sites off of one image.
Home Page
Download size: 561 Kb
Download time (28.8 modem): 3 min.


Links - Utilities - Submitting

Home : Links : Utilities : Advertising

I do not recommend paying a company to submit your site to search engines. It is relatively easy to manually submit your site to the major search engines quickly. See the Getting Noticed Page for more information.

AddAce - Nathan Lebovic
This free (with the exception of a few advertisements) utility lets you quickly and easily submit your site to the major search engines, along with hundreds of others. This utility is a lot like submitting sites manually, but makes it more automated. For example, you only have to type your name, URL, summary of your site, etc. once.
Home Page
 Download size: 2.47 Mb
Download time (28.8 modem): 13 min.

Aesop Award Submitter - Aesop Marketing
This nice little utility submits your Web site to 100 "award" sites.
Home Page
Download size: 1.17 Mb
Download time (28.8 modem): 6 min.


HTML 2000 | imagemaps

Home : Advanced : Imagemaps

1.html

<go back


HTML 2000 | imagemaps

Home : Advanced : Imagemaps

2.html

<go back


HTML 2000 | imagemaps

Home : Advanced : Imagemaps

3.html

<go back


Advanced - CSS Example

Heading

In this simple example, we use CSS to define some tag attributes for one page

Heading

This is my custom style.

<go back to css


3

3.html


Main

main.html


Menu

menu.html

This is the menu frame named blue.

This link will make the right frame show main.html

This link will make the right frame show 3.html


HTML 2000 | redirects

Home : Advanced : Redirects Example

In 10 seconds you will be transferred back to the HTML Help Welcome page. If you do not wish to wait, or you are not redirected, click here.

< back to advanced area


Links - Browsers

Home : Links : CGI/Scripting

HostedScripts.com - Many free services don't allow scripts. This site will host your scripts for you.

CGI Resources - Information on CGI scripting.

The Script Archive - Includes a large variety of scripts and discussions.


HTML 2000 | search

Home : Search

You can now search HTML 2000 from the bottom of every page!

From this page you can do an advanced search to find just what you are looking for.

Search For:
Match: Any word All words Exact phrase
Sound-alike matching
Dated:
From: ,
To: ,
Within:
Show: results summaries
Sort by: