Links

The Web is based on an idea called hypertext - a method of connecting content by moving from one page or file to another via links. If you've clicked on a link, you know about hypertext.

Hypertext links look like this:

On the Web, links are a different color (usually blue) and are underlined. And when your cursor is over a link you get the little finger. You know that when you click on the link, your browser will display the page to which the link points.

Now we're going to learn how to build those links. We're also going to learn how to link to images so that we can have pictures on our web site. What are we going to use? You guessed it. Gunk.

1
Create a New File

Here's the gunk you need to create a link.

<A HREF="xxxxx.html">
</A>

After the HREF (hypertext reference), you put in the name of the file. If you wanted to link to the test.html file we created a while ago, you would write:

<A HREF="test.html">
</A>

So let's create a second file. Let.s call it home.html. From it, we can link back to our first file.

Remember, we have to use a text editor, create a new File, fill it with gunk, and save it.

Let's make it look like this:

 

<HTML>

<HEAD>
</HEAD>

<BODY BGCOLOR="FFFFFF">

I am testing my first link.

</BODY>

</HTML>

So far, so good.

2
Add the Link

Now let's add the gunk for the link.

Note that where you put link defines what words end up clickable (i.e., blue and underlined). The words that come in between the <A HREF=" ...> and the </A> will be the ones that will show up as a link on your page.

Let's put them around the word "Link."

If we say,

I am testing my first <A HREF="test.html"> link.</A>

The page will look like this:

We've done two things: we've identified the clickable words and we've identified the linked file.

And what happens if we click on the link???

Woo-hoo! It works!!!

3
Test the Link

You can use your browser's Back button to return to the first page. Then you can click that link again!

If you want to really get fancy, add this to the bottom of test.html:

<P><A HREF="home.html">Home</A>

It will take you via another link back to the home page.

Then you can click back and forth all day!

      

4
Adding Pictures

You link images in a similar way. Remember the door we drew? We saved it as a GIF file called door.gif. Let's create some gunk so we can put it in our home page.

Here's the gunk for an image:

<IMG SRC="door.gif">

So let's add it to home.html.

Let's say:

 

<HTML>

<HEAD>
</HEAD>

<BODY BGCOLOR="FFFFFF">

I am testing my first
<A HREF="test.html">link.</A>

<P>It's my door to a
whole new world!

<P><IMG SRC="door.gif">

</BODY>
</HTML>

And that gives us this:

5
Pictures as Links

OK, we're going to do one more thing, and then you are done with Five Easy Pieces.

Let's turn the picture into a link. Then, when you click on the door, you go your linked page.

Links and images are building blocks too, and they can be combined.

Remember for a link we said:

<A HREF="test.html">link.</A>

And for an image we said:

<IMG SRC="door.gif">

Let's put the two together. Instead of having words in between the <A HREF> and the </A>, we can have the HTML for the picture. It looks like this:

<A HREF="test.html">
<IMG SRC="door.gif" BORDER=0>
</A>

(BORDER=0 stops the browser from putting a blue line around your picture).

Put the HTML in the home.html file and we look at it we get this:

We still have the door, but now the image acts as a link; when your cursor is over it, you see the clicking finger and when you click you go to the linked page.

Now, you not only know how to link pages with text, you know how to link pages with images!

6
Good Navigation

A web page is just one page; a web site is a linked set of pages with one selected as the home page. The home page is the first page the visitor will see and the page you register with search engines so people can find you on the Web.

When connecting your pages with links, remember to think about how visitors can best get from one page to another in your site. The joy of the Web is this very ability to link pages together so we want to do it in a thoughtful manner.

For starters, make sure you give visitors the following links:

link to the next page
link back to the home page.

It might look like this:

The Home page links to Page1; the HTML might look like this:

<A HREF="page1.html">Next</A>

Page1 links to Page2 in the same way; Page2 links to Page3; each page links back to the Home page.

You can link pages together in many different ways. You can link them directly or link them one after another with a "next" link. Or both! To get an idea of what links look like in practice, click around the wigglebits.com site and see how it's pages are linked.

7
Files, Pictures, and Folders

All the files for your web site should go in one folder with folders inside as needed.

It's a Web convention to put all your images (PNGs, GIFs and JPEGs) in their own folder. It helps to organize things and keeps the number of files in the main web folder down to a minimum. If you do put your images in a folder, you have to link to it in a slightly different way, by identifying the name of the folder in the link.

We should structure our folders as follows, with the web folder containing the two HTML files plus the image folder:

Then we should make our links to the images look like this, so the browser knows to look in the images folder:

<IMG SRC="images/door.gif">

You should structure Windows folders n the same manner.

The two files of your web site now look like this.

home.html

 

<HTML>

<HEAD>
</HEAD>

<BODY BGCOLOR="FFFFFF">

I am testing my first
<A HREF="test.html">link.</A>

<P>It's my door to a
whole new world!

<P><A HREF="test.html">
<IMG SRC="
images/door.gif" BORDER=0>
</A>

</BODY>
</HTML>

test.html

 

<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="FFFFFF">
<CENTER>
<H1>

Welcome!

</H1>
</CENTER>

I am an HTML Author.

<P>
<B>
You</B> can be one too!

<P>
This is all you do:
<UL>
<LI>
Files
<LI>
Words
<LI>
Pictures
<LI>Colors
<LI>Links
</UL>

<FONT FACE="Geneva,Arial">
<FONT COLOR="993366">
<FONT SIZE="+2">

Try it and see!

</FONT>
</FONT>
</FONT>

<P><TABLE BORDER=2>

<TR>
<TD>
Ya</TD>
<TD>
Ba </TD>
</TR>

<TR>
<TD>
Daba</TD>
<TD>
Doo!</TD>
</TR>
</TABLE>

<P><A HREF="home.html">
Home</A>

</BODY>
</HTML>

And your two web pages should look like this:

Congratulations!
You are a Web Master!!!

Intro | Comm | Pub | Five Easy | Web Ed | Found | Squeezing | Standards | Animate | Epilogue

Files | Words | Pictures | Color | Links

 

All contents copyright (C) 1999-2007 Wanda Wigglebits. All rights reserved.