Site hosted by Angelfire.com: Build your free website today!

How to HTML -- Key Club Style!

Buckle up, because you're in for a WILD RIDE! Open up a new "Notepad" file and let's get started! (You should be able to find the Notepad program by going to the start menu, programs, accessories, and Notepad.)
Set up the file so it looks like this:

<html> <head> <title>Funkytown Key Club Website</title> </head> <body bgcolor="white" text="black" link="red" alink="orange" vlink="blue"> </body> </html>

You can change anything that is in quotations. The things that will actually appear on the website that you are about to create will be added in between the body tags - and . Most commands have a required beginning tag and ending tag, like the body tag. The two most common commands that do not require ending tags are the

<p> a and the <br>. Typing <p> into your code will create a skipped line. For example, there's one written in this file... right... here!

And look! The text skipped a line. There's a

<br> right here...
And lo and behold, the text just went to the next line, without skipping.

Before you go on, it's time to save your page. Go to File, then Save As, then name it kcpage.html and make sure you know where you plan to save it! If you don't know where you saved it, how will you know where to find it later? Make sure you add ".html" to the end of any html files that you create.

Hot Tip Save your work EARLY and OFTEN!

Now it's time for the fun stuff that will make your page more interesting to look at and will help you stress to your viewers what is so very important about the things on your page!



Change the Font

<font face="times new roman">I love Key Club!</font>

Looks like:

I love Key Club!

Standard fonts, such as times new roman, arial, courier new, comic sans ms, and verdana should work on all computers.

Change the Font Size

<font size="+2">I love Key Club!</font>

Looks like:

I love Key Club!

<font size="=1">I love Key Club</font>

Looks like:

I love Key Club!

Putting it Together

So you want to change the size AND the font? Can do!

<font face="comic sans ms"><font size="3">Governor Stephanie is awesome.</font></font>

Looks like:

Governor Stephanie is awesome.

Change the Color

<font color="pink">Did you know that Trustee Rich looks good in pink?</font>

Looks like:

Did you know that Trustee Rich looks good in pink?

Regular colors, such as red, orange, yellow, green, blue, purple, pink, gray, black, and white, will work with this tag. If you're more daring, try some of these colors: dodgerblue, salmon, blueviolet, turquiose, darkpink, lime, seagreen, royalblue, goldenrod, coral, burlywood, firebrick, forestgreen, fuscia, skyblue, indianred, olive, peru, orchid, plum, springgreen, steelblue, teal, hotpink, and cornflowerblue. And for the really daring, experiment with adding "light," "medium," or "dark" to change the color more.

Add a Link

<a href="http://www.keyclub.org">Click here to visit the Key Club International website.</a>

Looks like:

Click here to visit the Key Club International website.

Hot Tip You can play around with the placement of any of these tags. Put them around only certain words if you want.

Text Effects

<center>I'm a New Yorker born and a New Yorker bred!</center>

Looks like:

I'm a New Yorker born and a New Yorker bred!

<div align="left">I'm a New Yorker born and a New Yorker bred!</div>

Looks like:

I'm a New Yorker born and a New Yorker bred!

<div align="right">I'm a New Yorker born and a New Yorker bred!</div>

Looks like:

I'm a New Yorker born and a New Yorker bred!

<i>When I die I'll be a New Yorker dead.</i>

Looks like:

When I die I'll be a New Yorker dead.

<b>When I die I'll be a New Yorker dead.</b>

Looks like:

When I die I'll be a New Yorker dead.

<u>When I die I'll be a New Yorker dead.</u>

Looks like:

When I die I'll be a New Yorker dead.

<s>When I die I'll be a New Yorker dead.</s>

Looks like:

When I die I'll be a New Yorker dead.

<marquee>Key Club is the largest service organization for high school students worldwide!</marquee>

Looks like:

Key Club is the largest service organization for high school students worldwide!

<marquee bgcolor="royalblue">Key Club is the largest service organization for high school students worldwide!</marquee>

Looks like:

Key Club is the largest service organization for high school students worldwide!

<marquee behavior="alternate">Key Club is the largest service organization for high school students worldwide!</marquee>

Looks like:

Key Club is the largest service organization for high school students worldwide!

Add an Image

<img src="images/kclogo.gif">

Looks like:

Make an Image into a Link

<a href="http://www.keyclub.org"><img src="images/kclogo.gif"></a>

Looks like:

Add an Email Link

Write to the New York District Board at nydkc@angelfire.com or by clicking
<a href="mailto:nydkc@angelfire.com">here</a>.

Looks like:

Write to the New York District Board at nydkc@angelfire.com or by clicking here.

Make a Horizontal Line

<hr>

Looks like:


A Few Pointers

DOs: DON'Ts:
*Keep it simple.
*Choose a light color for the background and a dark color for the text OR a dark color for the background and a light color for the text.
*Choose an easy to read font and choose a size that keeps it legible (like “2” or “3”).
*Make navigation clear and easy for visitors.
*Edit your work and spell check your text.
*Have a calendar of events for members to check.
*Post past club meetings’ minutes and future club meetings’ agendas.
*Post information from all levels of Key Club: International, District, Division, and Club.
*Congratulate members of your club for the good things that they do.
*Add links to other related websites.
*Add a counter to keep track of visitors. (Try www.thecounter.com.)
*Clutter the site with lots of graphics or try to get fancy when you’re still a beginner.
*Choose colors that clash.
*Put people’s names or email addresses on the site without their permission.
*Put ANY phone numbers, addresses, fax numbers, etc. on the site.
*Leave out any parts of commands, such as quotation marks or < > marks, otherwise, the ugliness will show up on the page.
*Have dead links (i.e. links that don’t work or lead to nowhere).
K-Family Graphics Online: http://www.kiwanis.org/logos.html

Find more information and ideas for your site by going through K-Family websites or printed literature.

These guidelines should help you to get a page started on your own. There are many more things you can add that will give more life to your page, but if you're a beginner, then stick with these guidelines until you think you've mastered them. Once you've memorized and mastered these things, try a site like www.htmlgoodies.com where you can learn how to do more! You can also view the source codes of various sites just to observe, never to steal, to help you learn how to code the things that you see. To check the source code of a page, click View in the menu and go to Source. You can also check the source by right clicking on the page and clicking on View Source.

GOOD LUCK and HAVE FUN!


The possibilities are endless....