My heart Just me Another heart
String of red beads
Fut ure Cyn 's
HTML Cheat Sheet

HTML basics made easy (I hope)

Contents: Webpage Structure | Basics | Blinking | Size | Colors | Italics | Bold
Advanced | Lists | Tables | Icons | Links | Closing notes | Read it all

Neon red bar

This is my original "Cheat Sheet"...
In NO WAY does it attempt to explain HTML in depth...ok?...

If you still have questions after reading this,
I'd be more than happy to help you. Just E-mail me.....Please be sure to include HTML in the subject line

We will assume, by now, that you’ve decided you are ready for your own WebPage (or HomePage) from GEOCITIES, or at least you have found a chat room that supports HTML. You’ve seen everyone posting those really cool pictures, images, and icons, and they can post to each other using different sized letters with lots of different colors. Well, now you can too!

HyperText Markup Language, or HTML is simply a computer language that interacts with the Internet. After reading this Cheat Sheet, and learning HTML you can design your own WebPage just the way you want it, or impress your friends in your chat room!

HTML is easy, you just have to remember the brackets...and close all tags. A tag is any HTML instructions inside of the brackets...the < opens the tag, and > closes the tag. In addition to that, you sometimes have to tell the HTML where to end and you do that with </...>...Read on, and you’ll see what I mean.

Same old red bar

Basic WebPage Structure

Every WebPage have these same structures, (although some contain JAVA as well, but that's another story altogether. The Basic Structure is:

<HTML>
This tells your browser that us are definitly using HTML now.
<HEAD>
This identifies the first part of your WebPage and the part that hold the title.
<TITLE>
This is the name of your WebPage. When others visit your website, this title will appear across the top of their screen just like My HTML Cheat Sheet by FutureCyn appears across the top of your screen right now. This is also the title that appears in someone’s list of bookmarks to identify your page. Make it grab their attention!
</HEAD>
Closes the HEAD tag.
<BODY>
This is the main text of your page. Everything that makes your page yours will be in the BODY tag. The remainder of this Cheat Sheet will show you how to get the look you want within the body of your WebPage.
</BODY>
Closes the BODY tag.
</HTML>
Closes the HTML tag.

Same old red bar

HTML Basics. With knowledge of the following, you can design the BODY portion of your WebPage to reflect your personality, or impress the people in your chat room if it supports HTML.

Same old red bar

For blinking:
<BLINK>Make my message blink!</BLINK>
results in Your message is blinking!
One note: Use this sparingly...it can be quite annoying to your potential visitors. (The "blinking" tag doesn't work when viewed with some browsers, including Internet Explorer. I don't know why...sorry.)

Change font size:
(There are two ways that I know of, this is the one I use.)
<FONT SIZE=5>Your message here</font>
results in Font this size.
(This page is written in font size 3, my colorful name up top is size 7.)

Change color:
<FONT COLOR=RED>Your RED message here</font>
will give you RED results.
Most of the "normal" colors you can just use the name...like red, blue, green, etc. Color Wheel For more variants on a color, you may need to use the hexidecimal RGB value found on color wheels throughout the Internet, or you can find a GREAT one by clicking on this color wheel.

RGB values look like this: ff00ff is the pink in my name, black is 000000, white is ffffff, silver is 9690cc, lime green is 00dd00. (I've also discovered that different words will produce different colors. For example, lime green will result when you mispell green as GRENN. This is the color of FutureCyn when you use the HTML tag <FONT COLOR=FUTURECYN>. Here you can have some fun and discover all kinds of other colors! )


Change color and size:
<FONT COLOR=BLUE SIZE=4>Your big blue message here</font>
makes a Big blue message!.

To do all three:
<BLINK><FONT COLOR=GREEN SIZE=6>Your large green message here</FONT></BLINK>
makes a Large blinking green message!.
Notice that BLINK is the first tag and the very last tag. It doesn't matter so much which HTML tag is first, you just do not want to start with one, and end with another...Usually it doesn't matter, but on some browsers, overlapping tags will not come out right.
Italics: begin with <I>and end with</I>
Bold: begins with <B>and ends with</B>, making it bold!
To start a new line instead of one line running right after the other (I do this alot in the chat room when I post to more than one person in a single post):
<P> (for paragraph), adding one blank line between your posts or paragraphs,
<BR> (for break), leaving no blank line between your post or paragraphs), or
<HR> (for hard return), producing the lines you see here between each section.
If you use the <BR>, you sometimes must use the </BR> as well, however, if you use the <P> you do not need to use </P> to end it.

Same old red bar

HTML Advanced. Knowledge of these tags helps to add all the fun stuff. It also helps you organize your webpage and makes it easier for your visitor to read (and maybe a bit more interesting too).

Same old red bar

To list items, the first tag is what type of list you are making.

Ordered lists can be numbered (1, 2, 3, etc) or alpha (A., B., C., etc., in caps or lowercase), or even in Roman numerals. The HTML tag to start the list is <OL> and to end your list use </OL>. <LH> (for List Heading, or the name of your list) is completely optional. Between these codes, you specify each item in your list with <LI> (for Line Item). Simply for purposes of clarification, I’ve dropped down a line for each list item. (You will not need to do this for it to work.) For example:

<OL>
<LH> To Do:
<LI>chat
<LI>nap
<LI>eat
<LI>nap
Will result in this
    To Do:
  1. chat
  2. nap
  3. eat
  4. nap

Unordered lists, those with or without bullets, begin with <UL> and end with </UL>. Again, the <LH> (for List heading) is completely optional. (An Unordered list without bullets begins with <UL PLAIN>. For example:

<UL>
<LH>To Do:
<LI>chat
<LI>surf
<LI>eat
<LI>nap
Will result in this
    To Do:
  • chat
  • surf
  • eat
  • nap

Occasionally, your list header will be offset to the right (as it is above). I’m not sure why that is, nor how to keep that from happening if you really need a numbered list. However, if it’s not that important to have the numbers or the bullets, the Definition List is probably what you want.

Definition Lists begin with <DL> and end with </DL>. <DT> (for Definition Term) is the next code and <DD> (for Definition) follows. In this type of listing, your DT can be the name of your list, and each item on your list will be indented to the right if placed in the DD code, however, there is no numbering, nor bullets with this type of list. (I’ve used this type of list throughout this page, as well as on my Friends page.) Again, for simplification purposes, I’ve dropped down a line for each code, but this is not necessary for the coding to work. Example:

<DL>
<DT>Things to Do:
<DD>eat
<DD>nap
<DD>chat
<DD>surf
</DL>
Will look like this:
Things to Do:
eat
nap
chat
surf

Because HTML doesn’t recognize tabs, lists are also useful if you want something to appear indented or tabbed to the right. Simply put your text in an unordered list with no list items.

<UL>Text to be indented</UL>
Will get you this:
    Text to be indented

Tables are also useful when you want information displayed a certain way. Tables have several different tag definitions that can be modified in any number of ways to get the effect you desire. A table begins with the <TABLE> tag and ends with the </TABLE> tag.

Within the <TABLE> tag you designate:

The rows across your table are designated by the <TR> and the </TR> tags. Between these tags, you designate the individual cells with the <TD> and the </TD> tags.

With just these few tags, you can produce a very basic table. For example, the HTML for a table of 2 rows across with 3 columns down would look like this:

<TABLE BORDER=3 CELLPADDING=3 CELLSPACING=3>
<TR> <TD>
Cell 1</TD> <TD>Cell 2</TD> <TD>Cell 3</TD> </TR>
<TR> <TD>Cell 4</TD> <TD>Cell 5</TD> <TD>Cell 6</TD> </TR>
</TABLE>

And would produce this:

Cell 1Cell 2Cell 3
Cell 4Cell 5 Cell 6

If you want a cell to span across more than one column (i.e. join cells), you would add in the <TD> tag COLSPAN=#. The number entered would indicate the number of colums to span. Similarly, if you want a cell to span more than one row, ROWSPAN=# would be added to the <TD> tag.

For instance:

<TABLE BORDER=3 CELLPADDING=3 CELLSPACING=3>
<TR> <TD>
Cell 1</TD> <TD COLSPAN=2>Cells 2 and 3</TD> </TR>
<TR> <TD ROWSPAN=2>Cell 4</TD> <TD>Cell 5</TD> <TD>Cell 6</TD> </TR>
<TR> <TD>Cell 7</TD> <TD>Cell 8</TD> </TR> </TABLE>

Will produce this:

Cell 1Cell 2 and 3
Cell 4Cell 5Cell 6
Cell 7Cell 8

You can also change the background and font color within the cells as I explained previously. Tables were also used on this page in the discussion of Lists, to present the HTML tags and results side-by-side.


To post icons and/or images, the image must first be on the net somewhere. YOU CANNOT POST AN ICON YOU HAVE SAVED TO DISK OR TO YOUR HARD DRIVE. Icon Bazaar is a great place to find icons and/or images.

To post an icon on your new Homepage, you find an image you like, put your mouse on it, right click, then ‘save as’. You will be given your choice of where to save it, and what you want to call it, then send it to your Homepage server via whatever means your server has specified. GEOCITIES provides an easy file transfer facility, others may require File Transfer Protocol (FTP). Just check with your Homepage server as to what they offer and provide.

Once you’ve sent the image/icon to your server, make a note of the physical size of the icon. You can do this by right clicking on the image, then ‘view image’. The image will appear on a blank screen, and the width and height will be shown across the top of the browser window. Width is alway listed first, height listed second. When you post icons to your Homepage, the page will load faster if you include these measurements in your HTML tag, although the icon will still work if you chose not to list them. When someone accesses your page, their browser immediately begins to load, from the top down. If you don’t tell the browser how big the image is, it will continue loading it, AND NOT MUCH ELSE until it’s completely loaded, then move on to the next thing. With the size of the image included, you are basically telling the browser “only save this much room for this image, and go ahead, continue loading the rest of the page while you receive this image”.

’Alt text’ is another neat trick. It’s also not required for the image to work, but if someone comes to your page, and, for whatever reason, they are unable to view your images, they can read your ‘alternate text’ instead. Here is how everything works together:

Beautiful butterfly icon

The HTML tag to post icons is
<IMG SRC="http://then the exact URL location of your icon">
For example,
<IMG SRC="http://www.iconbazaar.com/animals/bug05.gif">
will post the butterfly over there, and

<IMG SRC="http://www.iconbazaar.com/animals/bug05.gif" WIDTH="32" HEIGHT="31">
posts the size of the image as well, and

<IMG SRC="http://www.iconbazaar.com/animals/bug05.gif" WIDTH="32" HEIGHT="31" ALT="Beautiful butterfly icon">
will let your visitors know that if they can’t see the image, they are missing out on a beautiful butterfly icon! Go ahead and put your mouse on the butterfly above but don't click...See the "ALT" text now?

I’m also frequently asked how to provide links to different places on the internet. This is actually quite easy too. A linking HTML tag begins with
<A HREF=”http://Destination link here"> and ends with </A>.
These are your “A” tags (for ‘anchor’). What you put between these tags is what others will see for the link. You may use text between them, or an icon. If you use an icon, the tag I’ve explained above would be placed between the “A” tags. For example:

<A HREF="http://www.geocities.com/SouthBeach/Sands/7227"> Home Page of the Future</A>
is the HTML tag link to Home Page of the Future, using text as the link.
(If you click on this link right now, it will take you back to the first page of this homepage, then just hit your BACK button at the top of your browser window to return here.)

HP link
<A HREF="http://www.geocities.com/SouthBeach/Sands/7227">
<IMG SRC="http://www.iconbazaar. com/animals/bug05.gif"></A>
posts the butterfly as the same link.

(There are several examples of using both text and icons as links throughout this Cheat Sheet.)

You can use these same methods to post a link to your email address, but the tag language is slightly different.
<A HREF="mailto:FutureCyn@hotmail.com">E-MAIL THE FUTURE</A>
uses text and results in E-MAIL THE FUTURE.
With this type of email link, the subject line is left blank, so this link is suitable for any page of your homepage. However, if you want to know specifically which page your sender was on when they emailed you, you can add a little more code to the email link, and the subject line will be completed for most senders. For instance, from this page, my email link tag could be written:
<A HREF="mailto:FutureCyn@hotmail.com?subject=HTML">E-MAIL THE FUTURE</A>
and results in an email window opening up with HTML already filled in for the subject of the email. If I substituted an icon tag for the text, the icon would be the link to my email. One should note here however, not all browsers support this "?subject=" tag. Mail from your visitors can be misdirected or lost completely. You will ever know your visitor ever wrote to you, and your visitor will always wonder why you never wrote back.
I hope I've given you a good start on HTML language. There is much, much more to know about HTML, and I'm still learning all the time as well, however, I learned most of it by surfing and searching on-line like you are doing right now. PLEASE feel free to print this page up so you can refer to it while you design your own homepage. I also ask, if you've found this Cheat Sheet helpful, please email me and refer your friends and visitors here. I'm also open to corrections and/or constructive criticism. If I've missed something important here, please let me know.

I've already typed up the HTML I use most, and saved it to a Notepad. When I want to post something specific in a chat room, I open that Notepad file, copy the HTML tags, and paste it. This is a great timesaver, and avoids many mistakes when I'm in a hurry!

Good luck, and let me know if you get stuck or need any help at all!...

Cynthia (aka FutureCyn)

just a big red flowerPS: There is one really neat trick you can use if you find a homepage you really find attractive, but can’t quite figure out exactly how they did it. Depending on what kind of browser window you are using, at the top of the window is VIEW...click that after the page has finished loading, and click on SOURCE or DOCUMENT SOURCE. Another (slightly different) window will pop up, and you can then see all the HTML they used on their page. Try it here now...and again, Good Luck!

Contents: Webpage Structure | Basics | Blinking | Size | Colors
Italics | Bold | Advanced | Lists | Tables | Icons | Links | Top

Same old red bar

links Home E-mail me, HTML as the Subject friends
You are visitor number seeking HTML knowledge.
Links | Home | Email | Friends

Future Webpage Designs© 1997, 1998
Lubbock, Texas
1