Linking to other websites is relatively easy, but can be a science. This page features a brief introduction to the art of linking, followed by some tips for linking to Geobop websites, along with some free linking imags.

You probably already know how to create links. If so, you can skip the Linking 101 section below...except please read about title attributes if you aren’t familiar with those critters.

Each section features an example of the HTML code needed to create a simple text link to that website, like this...

<a href="http://www.geobop.org/" title="Geobop">Geobop</a>

You are not required to follow this exact format. These are just examples for your convenience.

There are also many free images you can use instead of or in addition to a text link. Any of the images displayed below can be used without written permission for linking to or otherwise publicizing the website(s) each image represents. If you’d like to use them for some other purpose, feel free to contact me. Feel free to rename the images as you see fit.

Each image’s size in pixels is indicated, with width followed by height. For example, the image below is 125 pixels wide and 25 pixels high.

Geobop White 125 px
125 X 25

Most images are displayed in front of a background with varying colors. That should give you an idea of how each image will look against backgrounds of various colors. Notice that some of the non-rectangular images don’t look too nice against dark backgrounds. However, most of them can be adapted to dark backgrounds. If you need a particular image for a certain type of background, please contact me.

And that’s about it. Just find the website you want to link to in the Page Menu, and take it from there.

I’d love to post links to some websites that link to mine, especially those that use images form this page. So please contact me if you’d like to be listed.

No Hot Linking

Please do not link to any images on this or other Geobop websites without my permission. You are welcome to download images from this page and publish them to your website.

Reciprocal Links

Yes, if you link to one of my websites, I’ll give you a reciprocal link. However, I haven’t figured out the format I want to use yet. I think I’ll add a special page to each website for this purpose.

Linking 101

This is an example of a simple link:

<a href="http://www.hello.com/">Hello.com</a>

In other words, that’s an example of the code you would insert in your HTML to produce a text link that looks like this: Hello.com

Title Attribute

It works, but we can improve it by adding a title attribute, highlighted in red text in the example below...

<a href="http://www.hello.com/" title="Hello.com">Hello.com</a>

The resulting link looks the same - Hello.com - But place your cursor over it and see what happens.

More important, the title attribute make links more appealing to search engines. In other words, if you want to publicize and promote a website, link to is using title attributes.

Note that the text in the title attribute does’t have to match the link title that you see on your web page. Here’s an example...

<a href="http://www.hello.com/" title="Visit Hello.com!">Hello.com</a>

Hover your cursor over Hello.com now.

PLEASE include title attributes in all your links to Geobop websites. I’ll return the favor if I link back to your site.

Images

To link an image, rather than text, you would simply replace the text in your code with an image tag. For example, I used the code below...

<a href="http://www.geoworld.org/" title="GeoWorld"><img src="/Linking/images/GW/GWAni150.gif" alt="GeoWorld" width="150" height="30"></a>

...to produce this linked image:

GeoWorld

Does that look too complex? Fortunately, good web design programs, like Dreamweaver, allow you to easily insert and link images.

Some of the coolest links combine images and text. Here’s an example:

Visit GeoWorld!
GeoWorld

And here’s the code I used to create it, with the visible text highlighted in bold, and the image portion highlighted in blue.

<a href="http://www.geoworld.org" title="GeoWorld">Visit GeoWorld! <img src="/Linking/images/GW/GWAni150.gif" alt="GeoWorld" width="150" height="30"></a>

If you know how to work with CSS, then you can do lots of other cool things, like position your links and images, alter their appearance, etc.

* * * * *

Geobop arrow

(General Rules and Instructions | Linking 101)

You can use this code or modify it to create a simple text link to Geobop:

<a href="http://www.geobop.org/" title="Geobop">Geobop</a>

Any of the images below can be used without written permission for linking to or otherwise publicizing Geobop.

Animated Images
Geobop Animated Image 250 px
Geobop Animated Image 200 px  
250 X 50 px 200 X 40  
  Geobop Animated Image 200 px Geobop Animated Image 150 px
  200 X 50 150 X 38
Static Images
GeoSurvey White 250px GeoSurvey Image White Text 150 px GeoSurvey Image 150 px Gold Text
GeoSurvey Gold 250 px
250 X 25 150 X 50 150 X 50
Geobop White 125 px Geobop Night Gold 150 px Geobop Night Gold 150 px
Geobop White 125 px 150 X 50 150 X 50
Geobop White Background 125px Geobop Gold 150 px Geobop Red 150 px
125 X 25 150 X 40 150 X 40
Buttons and Bears
GeoBear Geobop Logo 50 px Geobop Logo
50 X 81 px 50 X 50 px 25 X 25 px

GeoWorld arrow

(General Rules and Instructions | Linking 101)

You can use this code or modify it to create a simple text link to GeoWorld!:

<a href="http://www.geoworld.org/" title="GeoWorld!">GeoWorld</a>

Any of the images below can be used without written permission for linking to or otherwise publicizing GeoWorld (www.geoworld.org).

Animated GWNightAni200 GWNightAni150 GW Logo 150px
Images GWAni200 GWAni150
Static GW200 GW150 50 X 50 px
Images GW200Blue GW150Blue GW Logo 25px
  GW200Navy GW150Navy 25 X 25 px
  200 X 140 px 150 X 130 px  

GeoZoo arrow

(General Rules and Instructions | Linking 101)

You can use this code or modify it to create a simple text link to GeoZoo:

<a href="http://www.geozoo.org/" title="GeoZoo">GeoZoo</a>

Any of the images below can be used without written permission for linking to or otherwise publicizing GeoZoo.

GeoZoo Animated 200px GZOrange125px GeoZoo Logo
200 X 40 px GZLime125px
GeoZoo Animated image 150px GZBlack125px 50 X 61
GeoZoo Animated image 150px 125 X 25  
150 X 30 px    

GeoSymbols arrow

(General Rules and Instructions | Linking 101)

You can use this code or modify it to create a simple text link to GeoSymbols:

<a href="http://www.geosymbols.org/" title="GeoSymbols">GeoSymbols</a>

Any of the images below can be used without written permission for linking to or otherwise publicizing GeoSymbols.

GSBW200 GSBW150
GSRB200 GSRB150
200 X 35 px GS150White
  GS150Red
  150 X 26 px

Politix arrow

(General Rules and Instructions | Linking 101)

You can use this code or modify it to create a simple text link to Politix:

<a href="http://www.politix.us/" title="Politix">Politix</a>

Any of the images below can be used without written permission for linking to or otherwise publicizing Politix.

PX150RB PX125RB PX100RB Politix 125px
PX150Half PX125Half PX100Half 125 X 26 px
PX150Purple PX125Purple PX100Purple Politix 100px
150 X 35 px 125 X 29 px 100 X 23 px 100 X 22 px

PaleoZoo arrow

(General Rules and Instructions | Linking 101)

You can use this code or modify it to create a simple text link to PaleoZoo:

<a href="http://paleozoo.geoworld.org/" title="PaleoZoo!">PaleoZoo</a>

Any of the images below can be used without written permission for linking to or otherwise publicizing PaleoZoo.

PZ250 PZ200 PZTrack
250 X 35 px 200 X 28 px 150 X 50 px
PZGrad250 PZGrad200 PZ150Grad
250 X 31 px 200 X 25 px 150 X 19 px

U.S. Symbols arrow

(General Rules and Instructions | Linking 101)

You can use this code or modify it to create a simple text link to U.S. Symbols:

<a href="http://usa.geosymbols.org/" title="U.S. Symbols">U.S. Symbols</a>

Any of the images below can be used without written permission for linking to or otherwise publicizing U.S. Symbols.

USA250 USA200
USA250Star 200 X 25 px
USA250Red  
250 X 31 px  
USAStamp USAStamp125
150 X 200 px 125 X 167 px

 

Browsers 101 arrow

(General Rules and Instructions | Linking 101)

You can use this code or modify it to create a simple text link to Browsers 101:

<a href="http://www.browsers-101.com/" title="Browsers 101">Browsers 101</a>

Any of the images below can be used without written permission for linking to or otherwise publicizing Browsers 101.

BR250 BR250Stars
250 X 45 px 250 X 38 px
200  
200 X 36 px  

GeoWebWorks arrow

(General Rules and Instructions | Linking 101)

You can use this code or modify it to create a simple text link to GeoWebWorks:

<a href="http://geowebworks.geobop.com/" title="GeoWebWorks">GeoWebWorks</a>

Any of the images below can be used without written permission for linking to or otherwise publicizing GeoWebWorks.

GWW250Font GWW 40 X 40 px
GWW250 GWW200
GWW250Black GWW200Black
250 X 35 px 200 X 28 px


David Blomstrom—December 1, 2008
Invisible Republic logo
VMicrosoft-Free