GeoCities.us GeoCities.us » EnchantedForest » Fort Get your FREE home page!

rocket rocket rocket

HTML Is EASY!
(I'm 9 and I Can Do It)

LESSON 1  |  LESSON 2

Hi! I'm Martin. I'm 9 and I'm in fourth grade. This summer my dad was making a page about his model trains and I sat next to him and watched. Then I asked if I could type. Now I can make Web pages BY MYSELF. So I made these lessons for other kids. I typed them myself. My dad checked them.

Here is what you need:

  • A computer with Notepad. It's in Start, Programs, Accessories. (If you have a Mac, use SimpleText.)
  • Netscape or Internet Explorer. You are using one right now!
  • A grown-up. (See the rules at the bottom.)

1. Tags Are Like Light Switches

HTML is made of tags. A tag goes in these pointy brackets: < >. Most tags are like a light switch. One tag turns something ON and the other one turns it OFF. The OFF one has a / in it.

<B> turns bold ON. </B> turns bold OFF. That's it! B is for bold.

TYPE THIS:
<B>I am bold!</B> I am not.
YOU GET THIS:
I am bold! I am not.

2. The Skeleton

Every page needs these tags. My dad calls it the skeleton. I call it the bread, because everything else goes in the middle like a sandwich. Open Notepad and type this. Every bit.

TYPE THIS:
<HTML>
<HEAD>
<TITLE>My Test Page</TITLE>
</HEAD>
<BODY>
Hello! This is my page!
</BODY>
</HTML>

The TITLE doesn't go on your page. It goes way up at the top of the window, in the blue part. Everything you want people to see goes between <BODY> and </BODY>.

3. Save It and Look at It

  1. In Notepad, click File, then Save As.
  2. At the bottom it says Save as type. Change it to All Files. THIS IS IMPORTANT.
  3. For the name, type test.html and click Save.
  4. Now find test.html on your computer and double-click it. It opens in your Web browser. That's your page!!!

Leave Notepad open. When you change something, click File, Save, and then click Reload (Netscape) or Refresh (Internet Explorer) and you see the change. Type, save, reload. Type, save, reload. You do that a LOT.

4. BIG Words

The FONT tag changes your words. SIZE goes from 1 (teeny) to 7 (HUGE). Put this between the BODY tags:

TYPE THIS:
<FONT SIZE="7">HUGE</FONT>
<FONT SIZE="1">teeny</FONT>
YOU GET THIS:
HUGE teeny

5. Colored Words

COLOR makes words colors. My two favorite colors are lime and fuchsia. Fuchsia is a hard word. It's F-U-C-H-S-I-A. I spelled it wrong three times. If you spell it wrong you get some other color, and it's not the one you wanted.

TYPE THIS:
<FONT COLOR="lime">
Lime!</FONT>
<FONT COLOR="fuchsia">
Fuchsia!</FONT>
YOU GET THIS: (I made the box black so you can see the lime better)
Lime! Fuchsia!

There are 16 color names that work in every browser. My dad looked it up. Here they are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow. Orange is not one. I was sad about orange.

6. A Background Color

To color your whole page, put BGCOLOR in your BODY tag. Don't make a new BODY tag. Change the one you already have, like this:

TYPE THIS:
<BODY BGCOLOR="aqua">
YOU GET THIS:
Your whole page turns aqua. Like this box!

7. A Picture

GeoCities.us has free pictures on the clip art page. I picked the cat because he blinks and moves his tail! Here's how you get one:

  1. Go to the clip art page and right-click the picture you want.
  2. In Internet Explorer pick Save Picture As. In Netscape it says Save Image As.
  3. Save it in the SAME folder where test.html is. The cat is called cat.gif.

Then type this in your page. WIDTH and HEIGHT tell how big it is. The cat is 36 wide and 36 tall. My dad showed me how to find out: in Internet Explorer right-click the picture and pick Properties.

TYPE THIS:
<IMG SRC="cat.gif"
WIDTH="36" HEIGHT="36">
YOU GET THIS:
an orange cat that blinks

You can push Enter in the middle of a tag and it still works. I did that so it fits in my yellow box. I did it in the color box too, and I do it in the link next. But don't push Enter in the middle of the quote marks.

8. A Link

A link is words you click on to go somewhere else. The A tag makes a link. HREF is where it goes. I thought A was for Address but my dad says it's for Anchor.

TYPE THIS:
<A HREF=
"http://www.geocities.us/">
Go to GeoCities.us!</A>
YOU GET THIS: (it really works, try it)
Go to GeoCities.us!

My Best Mistakes

1. I forgot the / in </B> and my WHOLE PAGE went bold. Everything. Even the link. It looked like the page was yelling.

2. The first time, I didn't change Save as type and my page got named test.html.txt. When I opened it, it just showed all my tags. Ha ha.

3. I forgot a quote mark after a color and half my page disappeared. The computer was still waiting for the other quote mark.

4. My cat was named Cat.GIF on my computer, and I typed cat.gif in my page. It worked on my computer but NOT on GeoCities.us. My dad says the GeoCities.us computers care about big and small letters. Now I name everything with small letters.

My Dad's Rules

These are the rules for being on the Internet at our house. You should have them at your house too.

  1. No last name. That's why I'm just Martin.
  2. No town and no school. Not even a hint.
  3. Ask first. Before I put something new on my page, and before I write back to anybody, I ask my dad.

Are You a Grown-Up?

My dad says grown-ups should go to HTML from Scratch by Lydia Cavanaugh. She taught typing for thirty years and now she teaches a class at the library for people who never typed a tag. She has three lessons. My dad did Lesson 1 and said it was good.

GO TO LESSON 2: Lists and Tables!

A note from Martin's dad: Martin typed every word on these pages himself, over most of August and September. I checked the spelling and tried every example in both Netscape and Internet Explorer to make sure it does what he says it does. The mistakes section is all his, and he is prouder of it than of anything else here. If your child writes to him, I read his mail before he does, and I'd encourage you to do the same at your house.

You are kid (or grown-up) number
000287

E-mail me! [email protected] (my dad reads it first)
Last updated Saturday, September 18, 1999