-- Click to visit --
Home Page
Site Map,

Bones of a Web Site
Lesson 6   Lesson 7   Lesson 8


Anchors

Open your page1.html file in Notepad. Save it as page7.html. Now open it in your Browser, to watch the changes as you change your code during the lesson.

Anchors "link" the page to such things as places on this page, other pages, images or even sounds.
<A
HREF=" URL" (another page)
NAME="text" (a location within the page)
text</A>

Examples:

<A HREF="www.ralph.ralph.htm"> This is a link to nowhere </A><BR>

<A HREF="#HERE">Go Here </A><BR> <A HREF="#THERE">Go There </A><BR>

Here is the active code.
This is a link to nowhere
P.S. Clicking this link crashes my computer because it can not find the reference, and dies of shame.
This is a link to Lesson 1

Go Here on this page

Go There on this page



<A NAME="HERE">Here you are!</A> Here you are! Go Back





<A NAME="THERE">There you go!</A> There you go! Go Back



Extra stuff you may like to know

Let's learn about links.

It's really very simple. We'll make a link to Yahoo.
Start with this...

<BODY BGCOLOR="#FFFFFF">
Go to Yahoo!
</BODY>

Go to Yahoo!

Then add a pair of anchor tags.

<BODY BGCOLOR="#FFFFFF">
Go to <A>Yahoo!</A>
</BODY>

Go to Yahoo!

Add the URL and you're done! URL Stands for Universal Resource Locator. That's a big fancy phrase that the computer people came up with. They tend to do that alot. A URL is just an address.

<BODY BGCOLOR="#FFFFFF">
Go to <A HREF="http://www.yahoo.com/">Yahoo!</A>
</BODY>

Go to Yahoo!

Let's do one more.

<BODY BGCOLOR="#FFFFFF">
Go to Netscape!
</BODY>

Go to Netscape!

<BODY BGCOLOR="#FFFFFF">
Go to <A HREF="http://home.netscape.com/">Netscape!</A>
</BODY>
Go to Netscape!

An email link works the same way. We just use an email address instead of a page address.

<BODY BGCOLOR="#FFFFFF">
Send me <A HREF="mailto:[email protected]">Mail!</A>
</BODY>

Send me Mail!

We can make an image a link if we want. Using the 'Go to Netscape!' example above we simply substitute an <IMG> tag for the word Netscape!

<BODY BGCOLOR="#FFFFFF">
Go to <A HREF="http://home.netscape.com/"><IMG SRC="copper.gif" WIDTH=82 HEIGHT=68></A>
</BODY>

Go to

A frequent question I get is how do you get rid of that annoying blue border around the image when you make it a link? Simple...

<BODY BGCOLOR="#FFFFFF">
Go to <A HREF="http://home.netscape.com/"><IMG SRC="copper.gif" WIDTH=82 HEIGHT=68 BORDER=0></A>
</BODY>

Go to

One more note about links... It is perfectly acceptable to link to someones page(s) without asking. Links are what makes the Web the Web.

When you include images on your page, remember that they contain alot of data and therefore can be slow to load. One way to reduce the size (by size I mean Kb) is to reduce the dimensions. Cutting the length and width in half results in an image only 1/4 the size in Kb. Also you can reduce the number of colors. Here are a few examples:

Dimensions 310 x 304
# of colors- 238
Size - 69 Kb

Dimensions 207 x 203
# of colors- 238
Size- 34 Kb
Dimensions 207 x 203
# of colors- 48
Size - 19 Kb

All image editing was done with Paint Shop Pro.

Now granted, the first one is a larger, nicer and better quality picture, but think of it this way... if your page takes forever to load your visitors will probably leave and they won't see anything.

Another option that can be used if you want to offer alot of imagery is to provide thumbnails that link to larger versions of the image. Let's suppose that I want to offer three very nice pictures of let's say a few of my cars (I wish).


Click on the thumbnail to see a larger image

The first thing you need to do is fire up your image editor and make smaller versions of your images. It would also help to reduce the color depth. This bit about making a smaller version is very important. I have seen many instances of someone trying to make a thumbnail by simply reducing its dimensions in the <IMG> tag. All this does is load the full image into a smaller space. What you need to do is create a smaller copy of the image and use that as a link to the big image.

Let's do one. I think we'll use the Corvette (that's the blue one if there's anyone out there that for some silly reason doesn't know). Put the full sized image and the small image in your working folder. Once again, Netscape users right click & save as.

Start with your <IMG> tag.

<BODY BGCOLOR="#FFFFFF">
<IMG SRC="car1a.gif" WIDTH=87 HEIGHT=60>
</BODY>



Add your <A> tags.

<BODY BGCOLOR="#FFFFFF">
<A><IMG SRC="car1a.gif" WIDTH=87 HEIGHT=60></A>
</BODY>



And add the URL and bingo, you're done!

<BODY BGCOLOR="#FFFFFF">
<A HREF="car1.jpg"><IMG SRC="car1a.gif" WIDTH=87 HEIGHT=60></A>
</BODY>



You can, if you want, get rid of the blue border. Although, you may wish to keep it so that your viewers know that it is a link. It's up to you.

<BODY BGCOLOR="#FFFFFF">
<A HREF="car1.jpg"><IMG SRC="car1a.gif" WIDTH=87 HEIGHT=60 BORDER=0></A>
</BODY>



Another way to link is to link not just to a page, but to a specific part of a page. Click here to be magically transported to where we first talked about URLs. Since it would be kind of hard to have you build an example, I'll just do the best I can to explain how it's done.

First start with the spot you want people to be transported to. Pick a word and wrap it in the <A> tags.

<A>Add</A> the URL and you're done!


Next give that spot a NAME.

<A NAME="upabit">Add</A> the URL and you're done!

What you have done is marked that spot. Now it can be referenced.


Now start building the link.

Click <A>here</A> to be magically transported...


Add the document to be referenced...

Click <A HREF="bones7.html">here</A> to be magically transported...


And lastly, add the anchor NAME like so...

Click <A HREF="bones7.html#upabit">here</A>

Click here to be magically transported...

And that's all there is to it! Not exactly brain surgery is it??



Home, Site pages,   Lesson 8


Back to Introduction, 2 Body text, 3 Body attributes, 4 Text Formatting,
5 Adding images, 6 Lists and lines, 7 Links, 8 Other comments.
the 140 Colour the page, using hex numbers,
HEXbcr, HEX test, Complex about colour,
My Web Address is           http://www.geocities.com/mallee2007

This website is developed and maintained by
, Elizabeth Janson

1
Hosted by www.Geocities.ws