MEGAN'S GUIDE TO HTML

Warning: If you're using Mozilla this isn't going to look quite right...

HTML is used to create hypertext markup language files, composed of text. These files can be written using a program like Notepad, which is on pretty much every computer running Windows. In DOS the three character extention is .htm. These files can be viewed through a browser such as Netscape.

BASIC HTML DOCUMENT:
<HTML>
<HEAD>
<TITLE>My Web Page</TITLE>
</HEAD>
<BODY>
<P>Hi, how are you?</P>
</BODY>
</HTML>

Tags are commands in the form <command>, and are not usually case sensitive
Separate lines are used only for easier editing
It's unnecessary to end some tags with </command>, but it's considered good form to do so
You can look at the source of an HTML document by using "View" and then "Document Source" in Netscape
For a simple webpage, all you really need are the <html> and </html> tags with text in between
The title appears in the uppermost section of the HTML document in Netscape

TO LOOK AT A FILE IN NETSCAPE:

To look at a file in Netscape that is online use http://

EXAMPLE: http://www.benjerry.com

To look at a file in Netscape that is on disk use file://

EXAMPLE: file://C:/megan/homepage/megpage.htm

COMMON PAGE TAGS:

You can divide pages with horizontal rules using <hr>
You can center images, tables, text, etc. using <center>

BACKGROUND, TEXT, LINK, AND VISITED LINK COLOR:

The tag to change from the default settings is:
<body bgcolor="######" background="?" text="######" link="######" vlink="######">
The six character color codes can be found at:
The Color Specifier For Netscape
Any section can be left out of the <body> tag
Background color appears first, then the pattern spreads over it
The background pattern can be a .gif or a .jpg file

TEXT:

You can rank text using <h1> to <h6> (biggest to smallest)
Use <em> (emphasis) or <i> for italics
Use <strong> or <b> for bold
Use <blink> for blinking text
Use <p> to create a new paragraph and skip a line
Use <br> for a line break, to start a new line without skipping a line
You can align text using the command <p align=(right,left,center)>
You can change the color of text using <font color="######"> and </font>
Escape Sequences-in order to make symbols that are not on the keyboard, like Å and µ, see:
Hypertext Markup Language Coded Character Set

MAKING LISTS:

There are three types of lists:

An ordered list:
1. list item one
2. second list item

You can create an ordered list using this format:

     <ol>

     <li>list item one</li>

     <li>second list item</li>

     </ol>

An unordered list:
- list item one
- second list item

You can create an unordered list using this format:

     <ul>

     <li>list item one</li>

     <li>second list item</li>

     </ul>

A definition list:

term: definition

You can create a definition list using this format:

     <dl>

     <dt>term</dd>

     <dd>definition</dd>

     </dl>

MAKING TABLES:

Basic Form:
<table border=10 cellspacing=10% cellpadding=10>
<caption>My Favorite Zoo Animals</caption>
<tr>
<th>ANIMALS</th>
<th>WHAT MAKES THEM UNIQUE</th>
</tr>
<tr>
<td>giraffe</td>
<td>tallest mammal</td>
</tr>
<tr>
<td>elephants</td>
<td>ivory tusks</td>
</tr>
</table>

In an HTML document the table looks like this:

My Favorite Zoo Animals
ANIMALS	WHAT MAKES THEM UNIQUE
giraffe	tallest mammal
elephant	ivory tusks

About Tables

<tr> stands for table row, <th> stands for table header, <td> stands for table data
You can extend rows or columns using the command <td colspan=#> or <td rowspan=#>
The three settings in the table tag create the separating lines but are not necessary
You don't need the caption or the table headers

IMAGES:

The tag to display an image is:

<img src="?.gif" height=# width=# align=(top,bottom,center) border=#>
?.gif is the name of your image file
You can align an image top, bottom, or center depending on how you would like it to look compared to the other text
If you put it in a paragraph you can align it right, left, or center on the page
You can specify the dimensions with height and width or leave it in its original form
If you want to use an image as an anchor, but don't want an outline, use border=0

IMAGE MAPS

The tags look like this:

<img src="barrel.gif" usemap="#barrel">
<map name="barrel">
<area shape="circle" coords="40,70,22" href="http://www.caltech.edu/~cabs/dining/index.html">
<area shape="rect" coords="3,12,77,132" href="http://www.caltech.edu">
<area shape="default" href="http://www.cco.caltech.edu/~megan/main.htm">
</map>
For circles, the numbers represent the coordinates of the center of the circle, and the radius
For rectangles, the numbers represent two of the corners of the rectangle
If regions overlap, the one listed first has priority

LINKING DOCUMENTS:

Be careful with file and directory names:
- Linking To a Whole Document:
  - <a href="?.htm">Go To Other Document</a>
  - ?.htm is the name of the file you are anchoring to, if it is online use the URL (http://...)
  - You can use an image instead of text as an anchor
  - You can also link to files that run in Freelance and other programs using the same tags
- Linking to Part of Another Document:
  - <a href="?.htm#hi">Go to a Part of Another Page</a>(in the source document)
  - <a name="hi">hi</a>(in the target document around the part you want to anchor the source document to)

ADDRESS:

<address></address>
Contains the author's name, email address, date created, and date of last update
Usually the last item in a file
The tag makes the text italic
You can let people send you email using <a href="mailto:your_email_address">send me email</a>

FOR FREE CLIPART AND BACKGROUNDS:

Randy'sIconand Image Bazaar
AAA Free Backgrounds and Textures
Fairy's Free And Easy To Download Icons
ICONZ... The Ultimate Free Icons Collection
Wallpaper Heaven!
Free downloads - TrueType core fonts for the Web

FOR HELP:

NCSA-A Beginner's Guide to HTML
Chris's HTML Help Tutorial Section 4- Advanced HTML
How do they do that with HTML?
Dynamic Drive DHTML(dynamic html) code library!
Sharky's Netscape Frames Tutorial
Web Workshop - Cascading Style Sheets in Internet Explorer 4
Andy's Introductory JavaScript Tutorials
Website Abstraction General JavaScript Tutorials
JavaScript for the Total Non-Programmer - A Tutorial
DevEdge Online - Online JavaScript Reference Manual
Welcome to Website Abstraction, THE JavaScript technology center!
PERL/CGI-Running "Hello, world!" from the command line