This page is not all-inclusive, but is meant to be a reference for exactly how you should type in HTML tags. Capitalization does not matter, but be CONSISTENT!
Basic Commands <HTML> This should begin every HTML web page, to tell the computer to use HTML code.
<HEAD> This sets apart the header of your page. The header gives information to computers, and NOTHING in the header appears on the screen, but it's still important
<TITLE> The Title of your page appears at the top of the browser window, NOT on the page and is used by search engines and computers, it should probably be identical to the title appearing on your page
</TITLE> This ends the title
</HEAD> This ends the header portion
<BODY> This begins the actual body of the page. What is typed after this command may be visible on the computer screen.
Words that appear on your page can be changed in a variety of ways, but the words should NOT be in angle brackets, or the computer will mistake them for code.
Back to Contents
<BODY TEXT="#rrggbb"> This tells the computer what color to make the color of the text. The "rrggbb" can be replaced with the number code of the color (i.e. "#ff00ff"). The default is Black, so if you don't use this code, your text will always be black (with some colors, the name of the color (i.e. “blue”, “red”) can be used instead of the name, but you have more colors if you use the hex (6 letter and number) code. Use care in using blue, as blue is default for links, and people tend to think all blue text is a link. The default is black.)
<BODY BGCOLOR="#rrggbb"> This signals the background color for the page. The "#rrggbb" can be replaced with the number code ( i.e. "#ff00ff") (with some colors, the name of the color (i.e. "blue", "red") can be used instead of the name, but you have more colors if you use the hex (6 letter and number) code. The default is white.)
<BODY BACKGROUND="bgimage.ext"> If you want a background image (wallpaper) instead of a color, use this code instead. Where I have “bgimage.ext”, type the name and extension (usually .gif or .jpg) of the picture you want in the background. Erase BGCOLOR to use this tag, so the computer knows which to use.
<BODY LINK="#rrggbb"> This allows you to change the colors of the links on your page. Use it with the next 2 (ALINK and VLINK) commands. Make sure people can tell what the links are, or they simply won’t click on them! The default is blue. Replace rrggbb with the code of the color you want.
<BODY ALINK="#rrggbb"> This allows you to change the colors of clicking links on your page, use it with LINK and VLINK commands. ALINK changes the color of a link when a visitor clicks on it. Replace rrggbb with the color you want when the visitor clicks on the link. The default is red.
<BODY VLINK="#rrggbb">This allows you to change the colors of the visited links on your page, use it with LINK and ALINK commands. VLINK changes the color of a link after someone has clicked on it.. Replace rrggbb with the color you want when the visitor clicks on the link. The default is purple.
Back to Contents
COLOR Font color is easy to change for a portion of a page, just type in < FONT COLOR="#ff0000">
and all the text AFTER that will be a different color
Use different numbers for different colors (there are waaaay more than the examples here): <FONT COLOR="#ff0000"> red </FONT>
<FONT COLOR="#ff6342"> orange </FONT>
<FONT COLOR="#ffff10"> yellow </FONT>
<FONT COLOR="#299c39"> green </FONT>
<fFONT COLOR="#006b84"> blue </FONT>
<FONT COLOR="#31007b"> purple </FONT>
<FONT COLOR="#ffboff"> pink </FONT>
<FONT COLOR="#000000"> black </FONT>
<FONT COLOR="#bfbfbf"> silver </FONT>
To change your font back to the original color, type in </FONT> , and the text AFTER
that will change back into your default (usually black) font.
In HTML, font sizes are numbered from 1 to 7. Average/normal/default font size is usually 3. To change it, type in <font size="2">,
all the text after that will appear a different size. To go back to your original font size, type in </font> , and your default size will appear again.
Here are some of the different sizes:
<FONT SIZE="1"> This is font size 1 </FONT>
<FONT SIZE="2"> This is font size 2 </FONT>
<FONT SIZE="3"> This is font size 3 </FONT>
<FONT SIZE="4"> This is font size 4 </FONT>
<FONT SIZE="5"> This is font size 5 </FONT>
<FONT SIZE="6"> This is font size 6 </FONT>
There is also a very easy way to re-size a small amount of text, just type in <BIG> around something to make it
bigger </BIG> , or <SMALL> around something to make it smaller </SMALL>
Back to Contents
APPEARANCE <BR> This is the equivilent of pressing return once, a line break
<P> This begins a new paragraph, like pressing return twice
To set apart parts of your page, add a horizontal rule To make part of your text stand out, surround that section of text with commands:
<B> This gets you Bold text </B>
<STRONG> This also usually results in Bold text </STRONG>
<I> This gets you Italic text </I>
<EM> This also usually results in Italic text (empasize) </EM>
<U> This gets you Underlined text (Be careful using this, people think everything underlined is a link) </U>
you can even make text that no one else can see, notes to yourself within your html. To make sure it stays hidden, type in <!--notes to myself-->
The internet is built like a spider web, with links from one place to another. For reasons of good ettiquite, please contact people at the page you link to when you creat a link to their page.
Your link does not HAVE to be words, you can make a button by replacing the linking words with the tag for a picture. Please keep in mind that if you use a button, make sure the link also exists in text, for those of us with limited patience for picture downloads.
"URL" is Uniform Resource Locater, code for the web-site you link to. Every site has an original URL, that it doesn't share with any other sites. We use "A HREF" to connect to urls.
<A HREF="page.html">-replace "page.html" with the URL of the web-site. If it is a page on your OWN site, you should be able to just type "name.html". If it is a page on another site, use the entire link
(example for a site NOT on your own page: <A HREF="http://www.wonderama.org"> Everything between the two angle brackets is part of alink...this is WAY to long of a link, make it only a few words long </A>)
(example for a site that IS on your own page: <A HREF="index.htm"> back to the home page </A>)
</A> -This ends the link (all of the area between the <a href> and the </a> will appear as the link...don't make the link long, use only a few words
<A NAME="anchorname">-This allows you to create an internal anchor on one of your pages, like what I did on this one. It helps people scroll up and down, but with only 1 page created still. Replace "anchorname" with the name you want on the anchor
</A">-This ends the anchor
<A HREF="#anchorname"> -The "#" makes this a different sort of link, to one of the anchors. Replace the "#anchorname" with a the name of the anchor, if it is an anchor NOT on your own site, type the entire link
(ex: <A HREF="#contents"> The "CONTENTS" anchor on the top of this page </A>
</A>-This ends the link
You also need your e-mail address on your page, and this can be made into a clickable link, but be sure it's also written out for the times when the linke doesn't work or if they want to write it down and e-mail you from elsewhere, etc.
<A HREF="mailto:youraddress@myself.com">- This tag will create an address that can be clicked on
(ex: <A HREF="mailto:wonderama@wonderama.org"> e:mail me at wonderama@wonderama.org </A>
Back to Contents
One of the great things about the internet is being able to include pictures with what you do. These are the picture commands, and if you don't include ALL of them (size/alt/border), most of the time your pictures still work, but sometimes you may need all of them (order of commands doesn’t matter as long as "img src" (image source resource code) is first.)
<IMAGE SRC="image.ext">- Replace "image.ext" with the address of your picture. Make sure you avoid capital letters in naming the picture and in typing in the code. Do NOT link to pictures on someone else's web page withou PERMISSION. If you put in someone's address with the picture name, you will effectively be STEALING their bandwidth. Make sure you have permission to use any picture you post. The "image" is the name of the file. The ".ext" is the extension of the picture, the type it is, usually ".gif" or ".jpg"
(ex: this code: <IMAGE SRC="highlightsbanner.gif"> creates this picture: <IMAGE SRC="image.ext" BORDER=n>- The border command adds a border onto the picture. Replace "n" with a number for the number of pixels...any number 0 (no border) or greater.
(ex: this code: <IMAGE SRC="highlightsbanner.gif" BORDER=5> creates this picture: <IMAGE SRC="image.ext" ALT="alternatetext">- This code is one of the most important! If for one reason or another the picture doesn't load, you don't want people to just see an empty link, you want them to have SOMETHING in that box. What you replace "alternatetext" with will appear when the picture can't. The "alt" will also appear when you hold the mouse over a certain image.
(ex: if I MISSPELL something or someone has their pictures disabled, I want the "alt" to appear: <IMAGE SRC="highlightsbanNner.gif" ALT="HIGHTLIGHTS"> creates this: (ex: if I type everything right, I may still want the alt, wave your mouse over the picture here : <IMAGE SRC="highlightsbanner.gif" ALT="YEA, This Rocks!"> creates this: <IMAGE SRC="image.ext" WIDTH=x HEIGHT=y">-Being able to re-size the pictures is also really handy. Remember, if you take a HUGE file and shrink it, it will still take FOREVER to load. When in doubt, make a small file and make it bigger for faster download times. The average computer screen size is 800x600 pixels, but people can change those settings, so it's rather relative.
(ex: <IMAGE SRC="newwonderama.gif" WIDTH=150 HEIGHT=50> shrinks the logo on the home page to something much smaller: There are so many web pages out there, you want visitors to find YOURS, so META tags help tell people what's there. These are in the "head" section, right below the title. Different META's have different names and tell different things, and they don't appear on the screen, but they help peole find your pages.
<META NAME="keywords" CONTENT="xxx">-This tells which key search words are associated with your page. Replace the xxx with keywords. You want to put a list of words you would expect to see in a search engine there. ("debbie, wonderama, kids, science, fun, laugh, jokes").
<META NAME="description" CONTENT="xxx">-The description that appears on a search engine when it loads your page. Replace the xxx with 1 or 2 sentences (around 1025 characters) describing your page.
<META NAME="author" CONTENT="xxx">-While this isn't shown by browsers (yet!) It is tremendously nice to know YOU are written down as the author of YOUR page. Replace xxx with your name.
Every command is surrounded by <Angle Brackets>. To end something, repeat the code (in brackets> with a /slash in front of it </endcode>)
To change the appearance of the page, several other tags can be included in the body tag. All of the following codes can be used, and the order does not matter, so a tag could read: <BODY LEFTMARGIN=25 TOPMARGIN=25 MARGINWIDTH=25 MARGINHEIGHT=25 TEXT="#000000" LINK="#0000ff" VLINK="#551a8b" ALINK="#ff0000" BGCOLOR="#ffffff">
When typing in HTML, pressing return doesn't cause a line break, so use one of the following 2 commands:
use the code <HR>
<STRIKE> This lets you Strike out text </STRIKE>
We usually add links to a web page to connect to another place, either on another of your own pages, on someone else's page, or even another section of the same page (like the "anchors" on this page that take you throughout it)