GeoCities.us GeoCities.us » SiliconValley » Horizon Get your FREE home page!
Lesson 3: Links and Pictures
Start Here  |  Lesson 1  |  Lesson 2  |  Lesson 3

Links are what make it a Web. This is my favorite lesson to teach, because it's the night the pages stop being documents and start going places.

Linking to your own pages

Make a second page in Notepad, with the same skeleton from Lesson 1, and save it in your webpage folder as hobbies.html. Now, on your index.html, type:

<a href="hobbies.html">My Hobbies</a>

Save, reload, and "My Hobbies" turns blue and underlined. Click it and you're on your second page. a stands for "anchor," and href is the address it goes to. The words between the tags are what people click on. Make those words say where the link goes: "My Hobbies," not "click here."

Put a link back to index.html on the hobbies page, too. Every page should have a way home. A visitor with no way back is a visitor who leaves.

Linking to other people's pages

If the page is somewhere else on GeoCities.us, you can start the address with a slash and leave off the rest. This goes to the GeoCities.us clip art library:

<a href="/homestead/clipart.html">Free clip art</a>

For a page on some other computer entirely, you put its whole address between the quote marks, exactly the way you'd type it into your browser, http:// and all. Copy it from your browser's address box so you don't make a typo.

An e-mail link

<a href="mailto:[email protected]">Write to me</a>

When someone clicks it, their e-mail program opens with your address already filled in. Put your own address after mailto:, with no spaces. Try mine, if you like. I answer.

Putting a picture on your page

Pictures use the <img> tag, which has no closing tag. The GeoCities.us clip art library has pictures you can use without uploading anything, like this cat:

<img src="/images/clipart/cat.gif" width="36" height="36" alt="An orange cat">
WHAT YOU'LL SEE
An orange cat
  • src (say "source") is where the picture lives.
  • width and height are its size in dots on the screen. Always put them in. The browser can lay out your words while the picture is still arriving, instead of jumping everything around when it lands.
  • alt is a few words describing the picture. People with pictures turned off see those words instead, and so do blind visitors whose computers read pages aloud.

For your own pictures, save them as .gif or .jpg files in your webpage folder, and put just the file name in the src, like src="garden.jpg". Keep file names short, all small letters, and with no spaces. Scanned photographs belong in .jpg; drawings and clip art in .gif. And please shrink big photographs down in your picture program before you use them. A photograph straight off a scanner can take two minutes to load over a modem, and nobody waits two minutes.

A picture that's a link

Put the <img> tag where the words would go:

<a href="index.html"><img src="/images/clipart/cat.gif" width="36" height="36" border="0" alt="Home"></a>

border="0" stops the browser from drawing a blue box around the picture.

Moving in: putting your pages on GeoCities.us

So far your pages have lived only on your own computer. To put them on the Web:

  1. Sign in to GeoCities.us and go to the File Manager in the Member Center.
  2. Use the upload button to send your files: index.html, hobbies.html and any pictures. You can send up to ten at a time.
  3. Visit your address in your browser. There you are, on the World Wide Web.

If something shows up as a broken picture or a link says "not found," nine times out of ten it's capital letters. On your own computer, Garden.JPG and garden.jpg are the same file. On the GeoCities.us computers they are two different files. Make the name in your tag match the name of the file exactly. That's why I tell everybody: small letters, always.

Where to go from here

You now know enough HTML to make a real home page, and I mean that. When you're ready for more, here's what I tell my graduates:

  • Look under the hood. When you see a page you like, click View, then Page Source in Netscape, or View, then Source in Internet Explorer. Every page on the Web shows you how it was made. That's how all of us learned.
  • Tables are how people put things side by side. A young man in North Carolina has written the clearest explanation I've found: Tables for Layout.
  • Graphics. The GeoCities.us clip art library is a good place to start.
Final homework
1. Link your two pages to each other, both directions.
2. Put one picture on your front page, with width, height and alt.
3. Add an e-mail link at the bottom.
4. Upload everything, and then send me your address. I visit every single one, and I keep a list of my graduates' pages on the corkboard over my computer.

« Back to Start Here

Start Here  |  Lesson 1  |  Lesson 2  |  Lesson 3
Stuck? [email protected] · Last updated: September 21, 1999