<html>
<head>
<title></title>
</head>
<body bgcolor="" text="" link="" alink="" vlink="">



</body>
</html>

<a href=""> </a> makes things clickable
<img src="picture.gif"> display gif image
<img src="picture.jpg"> display jpeg image
<img src="pic.gif" width="50" height="50"> resize image
<img src="pic.gif" alt="Hello!"> When you mouseover the image, words appear!
<a href="index.html">HOME</a> Clicking the word HOME opens up a page called "index.html"

<a href="http://www.yahoo.com" target="new">
<img src="pic.gif"></a>

 Clicking the IMAGE opens a WEBSITE in a new window.
Don't forget the "http://" for websites
<a href="http://www.yahoo.com" target="new">
<img src="pic.gif" border="0"></a>		 Like the previous but removes the hyperlink border around the image
<a href="bigpic.gif" target="new">
<img src="smpic.gif"></a>		 Loads a picture called bigpic.gif. Great for thumbnails (i.e. clicking on a small picture to load a larger one)
<a href="sound.wav"><img src="pic.gif"></a> Plays a sound called sound.wav when you click on the image.
<a href="#top">back to top</a>
<a name="top"> anchor </a>		 Causes a scroll effect on a longer page to the place where the "anchor" <a name="common"> .. </a> is. The "#" must be added to the link code only.
<a href="mailto:you@something.com">email me</a> Starts the computers' mail program and opens an email to be sent to you@something.com(will work on your home computer, but NOT at school)

5 page graphic menu
<a href="home.html"><img src="home.gif" border="0"></a>
<a href="friends.html"><img src="friends.gif" border="0"></a>
<a href="pics.html"><img src="pics.gif" border="0"></a>
<a href="links.html"><img src="links.gif" border="0"></a>
<a href="quotes.html"><img src="quotes.gif" border="0"></a>

The Effects The HTML "sandwich" codes
BOLD <b> </b>
ITALICS <i> </i>
BOLD and ITALICS <b><i> </i></b>

indent

 <blockquote> </blockquote>
  • bulleted list
  • bulleted list
 <ul>
<li>item </li>
<li>item</li>
</ul>
  1. numbered list
  2. numbered list
 <ol>
<li>item 1</li>
<li>item 2</li>
</ol>
Font Size 1 <font size="1"> </font>
available sizes: 1 thru 7 , +1 thru +7, -1 thru -7

CENTERED

<center> </center>

ALIGNED RIGHT

 <p align=right> </p>
H2O <sub> </sub>
E=mc2 <sup> </sup>
A REALLY COOL SCROLL EFFECT!!! <marquee> </marquee>
COLORED TEXT <font color="red"> </font>
Bold, italics ,Verdana font, teal, size 6, scroll! <marquee>
<font color="teal" size="6" face="Verdana">
<b><i>
words
</i></b>
</font>
</marquee>
Special Characters and Non-sandwich tags
more           space between words &nbsp;
<hr align="center" width="75%" size="5">
< , > , ¢ , © , ® , “ , ” &lt; &gt; &cent; &copy; &reg; &#147; &#148;
words directly
below words		 <br>

SOUND
<bgsound src="music.mid or sound.wav" loop="1">
after </title> and before </head>

TABLE
This table is 2 columns by 3 rows This is Column 2 Row 1
This is Column 1 Row 2 This is Column 2 Row 2
This is Column 1 Row 3

The code to make the TABLE above is:

<table border="1">
<tr>
<td>This table is 2 columns by 3 rows</td>
<td>This is Column 2 Row 1</td>
</tr>

<tr>
<td bgcolor="yellow">This is Column 1 Row 2</td>
<td>This is Column 2 Row 2</td>
</tr>

<tr>
<td>This is Column 1 Row 3</td>
<td><img src="contact.gif"></td>
</tr>
</table>

For every <tr>.....</tr> a new row is started.
For every <td>...</td> a cell is added to that row.
Images or text can be coded between every <td> and </td>.


FORMS
Contact Webmaster

Name:
E-mail address:
How did you find this site?

Send me more info
Add me to your mailing list

Age:

Sex:
male
female

Comments:

<form action="mailto:youremail@something.com" method="POST">
<font size="4">Contact Webmaster</font><br><br>
Name:
<input type="text" size="30" name="name"><br>
E-mail address:
<input type="text" size="30" name="email"><br>
How did you find this site?
<input type="text" size="30" name="How you found us"><br><br>
<input type="checkbox" name="Send Info" value="ON">
Send me more info<br>
<input type="checkbox" name="Add to mailing list" value="ON">
Add me to your mailing list<br><br>
Age:
<select name="age" size="1">
<option value="youngin">under 18</option>
<option value="prime">18-35</option>
<option value="arthritic">over 35</option>
</select><br><br>
Sex:<br>
<input type="radio" checked name="sex" value="male">
male<br>
<input type="radio" name="sex" value="female">
female<br><br>
Comments:<br>
<textarea name="Comments" rows="3" cols="40"></textarea><br>
<input type="submit" name="SEND" >
</form>

LAYERS
A layer is like a page within a page that can be positioned EXACTLY
where you want it (Finally, more than just left, right and center!)
The position and area of each layer are given in pixels (screen dots).
A 300 x 200 layer positioned 50 pixels over and 60 pixels down
from the upper left corner of a page would be coded

<div id="layer1" style="position:absolute; width:300px; height:200px; left: 50px; top: 60px;">
words, images and links sandwiched here
</div>