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.
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.
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! )
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).
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.
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.
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:
And would produce this:
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:
Will produce this:
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 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:
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)
To list items, the first tag is what type of list you are making.
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.
<OL>
<LH> To Do:
<LI>chat
<LI>nap
<LI>eat
<LI>napWill result in this
<UL>
<LH>To Do:
<LI>chat
<LI>surf
<LI>eat
<LI>napWill result in this
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:
Text to be indented
The number entered here would indicate the number of pixels thick your border will be.
How crowded do you want each cell to be?
See the section on RGB color discussed previously.
This number indicates the number of pixels thick your cell divider will appear. Usually looks best if it matches the number you’ve chosen for your BORDER.
<TR>
<TD>Cell 1</TD>
<TD>Cell 2</TD>
<TD>Cell 3</TD>
</TR>
</TABLE>Cell 1 Cell 2 Cell 3 Cell 4 Cell 5
Cell 6
<TR>
<TD>Cell 1</TD>
<TD COLSPAN=2>Cells 2 and 3</TD>
</TR>
Cell 1 Cell 2 and 3 Cell 4 Cell 5 Cell 6 Cell 7 Cell 8
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.
The HTML tag to post icons is
For example,
will post the butterfly over there, and
posts the size of the image as well, and
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
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:
(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.)
(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.
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.
PS: 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!
Italics | Bold | Advanced | Lists | Tables | Icons | Links | Top
seeking HTML knowledge.