Linking Images and Pages

links

Linking pages within your website
Unless you intend to have your website as just a single page, you will need some links within your site. As you write each new page you will need to link it back to your home page (/index.html) and also to any other pages you may write; your homepage or index page will need linking to the other pages in your site.

Your new pages will each need a unique name so that your computer can recognise which page you want to connect to. It is a good idea to give each page a name which will give you a clue as to the subject of the page - don't make the same mistake I did and name the pages "page2.html" "page3.html" etc. (NOTE - there cannot be any spaces in your page names - if you want to break words, use the underline or a hyphen : "my_dogs.html" or "our-kids.html" for example. This also applies to names of GIFs and JPGs.)

You can link your pages with text links or buttons - it is purely a matter of choice, it is up to you whether you prefer the look of

BACK or     BACK TO HELP INDEX

- the process is just the same. Usually the position and purpose of the links dictates the style - if you are using key words within the text to indicate links then you are unlikely to want to use buttons!

The tag you need for all your links is

<A HREF="index.html">home page</A>

(insert the name of the page you want to link to after A HREF= and put the name you want to refer to this page by - e.g. Index, or Home, in between the tags.)

If you want to use an image (e.g. a button or a picture) to point to a link, use the tags exactly the same way except that you put your image tag in between the two parts of the link tag:

<A HREF="index.html"><IMG SRC="home button.gif" alt="home" height="50" width="35" border="0"></A>

If you are doing a lot of similar links, where only the names of the link pages and the images are different, you can speed the process up by doing copy-and-paste and just altering the relevant bits.

Outside links
The way to link your website to pages on other websites is exactly the same apart from the detail that instead of just inserting the linked page name - index.html - you have to include the whole website URL :

<A HREF="http://www.freesiteprovider.com/yourwebsite/index.html">

The HTML for this link :

The Large Munsterlander

looks like this :
<A HREF="/munsterlanders/"><IMG SRC="LM_button2.jpg" alt="The Large Munsterlander" height="54" width="154" border="0"></A>

and if you click on it you will see that it takes you away from this site to another of my websites - but don't panic, you can get back here by clicking on your browser's "back" button.

Webrings
Sooner or later you are likely to want to join one or more webrings. They are an excellent way of finding other sites with similar themes to yours and make "surfing the net" simplicity itself. A webring is a means of linking sites so that you can move from one to the next (in either direction) and eventually come back to the site you first started with. To find suitable web rings to join, either have a look at those on sites you like and find a webring you like the look of; click on "join" on the webring image and READ THE CONDITIONS of the webring before following the instructions for submitting your site, or go straight to the WebRing Home Page and search through the Ring Directory. You will be AMAZED at the sites and webrings you find listed there!

Once you have found a suitable webring and have filled in the form to submit your site, you will be sent an email (almost straight away) with the HTML for the ring. It will usually come ready-customised for your site, but if not you will have to put in your own email address and site ID (sent in the same email) where it says, when you paste it into your page. Copy the HTML from the email and paste it into your page exactly where you want it to go - you may need to space it out with <BR> tags and center it if this is not part of the HTML, and don't forget to check to see if you need to add your ID and email address. Some webrings come with a link to an image on the webring's homepage and others need you to copy the image* off the webring site and save it to your own server before it will show up on your page. Don't alter the GIF or JPG name when you save it or you'll have to alter the ring HTML too!

YOUR SITE IS STILL NOT PART OF THE WEBRING!! Test it by clicking on "random" and it should take you to another site in the ring; "list" should also work, but the others won't so don't think you've done it wrong. If the ring image looks right and list/random work, the next step is to email the Ringmaster (just "reply" to the original email you were sent) and let him/her know that you've put the HTML on your site. You need to tell them your site ID and the URL of your site - if you have your webring(s) on your index page this is straightforward, but if you have a special "webrings" page, then this is the URL you should have submitted when you signed up in the first place. (If you made any mistakes, or want to alter your web description etc., there is the facility for you to alter it at the WebRing site any time you want to.)

Below is a WORKING webring for the Alliance of Women HTML Educators - now there's posh for you! - to see the HTML coding, click on "view" on your top browser bar, then click on "source" on the drop-down menu and then scroll down until you come to <----BEGIN AWHE HTML FRAGMENT----> and the next part is the webring HTML coding:

WANT TO JOIN THIS RING?  CLICK HERE!
Previous Site
List Sites
Next Site
Random Site
ALLIANCE OF WOMEN
HTML EDUCATORS WEBRING

This site created by
~ Dianne ~




Back to HTML help pages index

Back to main index and home page

Some dos and don'ts

Email me if you need any more help with this.

Clipart image free with Microsoft Office

*To copy any image off a web page, place the cursor over the image and right-click; a pop-up menu will appear - left-click on "save as" and a normal "save" menu will appear. Choose which folder you wish to save to (the GIF or JPG name will appear for you) and click on "save." You must remember to load this image, and any others for your website, onto your website server.