4 of 7

How to create an image link

by Angel Sosa

For those out there, creating an image link may not be something of importance; however, look around. On the screen right now, there are six tabs across the top of the screen: Marketplace, Journalism Awards, Writing Contests, My Helium, Write, and Rate. These are image links. Simply put, an image link is a visual way to get one person's attention drawn towards a link so that he/she may be interested in following the link elsewhere. I am no web page expert, but I have learned a great deal about HTML, CSS, Flash and Java, and image links come in handy, especially when you're trying to keep the audiences attention and limit the wordiness.

In order to have done this by now, one would have to have space on a network place where he/she can place his/her website. From here, one can create his or her webpage either by the websites page designer, a handy program called Macromedia Dreamweaver, Microsoft Word, or simply (if he/she has sufficient knowledge of HTML) use notepad.

In HTML [Hyper-text markup language] there are attributes called tags, which are surrounded by "<" and ">". These surround the attributes. <html> starts the page while </html> closes the page. This is usually a simple key to remember within HTML - any tag that opens, must close - just as any object thrown up must come down. Let's assume one has already created their webpage [if one wishes for further instructions on learning html, visit this site: www.w3schools.com and follow the links to learn html].

Inserting an image link into a web page consists of two parts: making a link, and making the link an image. Whenever a link is created in html the tags <a> and </a> are used. This opens and closes the link. <a href=""> and </a> are the tags to insert for leaving the page you're on, and enter another. The quotation marks [""] are essential in using present-day HTML. Let's say I wished to make a link from here to google. The tag would then be <a href="http://www.google.com/"> GOOGLE</a>. The tag starts off with the link to http://www.google.com/, the word which then becomes the link is GOOGLE. </a> then simply closes the tag.

When creating an image link, the same attributes apply, let's say you had an image in your folder which you wanted to use. It was located somewhere like: http://www.triplebunnyhappiness/7819/1.jpg [This is not a true link]. and you wished to make that image link to google. As above, the whole mess of <a href="http://www.google.com">GOOGLE</a> is still true; however, the word GOOGLE is going to change. Remember how GOOGLE was the link, well from here, an image is going to be inserted, here are the tags for an image: <img src=""> and </img>. These tags will be INSIDE of the <a> and </a> tags. A quick overview of this would look like <a href=""><img src=""></img></a>. Why is this so? HTML tags MUST leave the way they came in. If you threw one ball in the air, waited a short time, and threw a second ball in the air the same height, the second ball wouldn't fall to the ground first assuming they were the same size. Same traits here.

So, continuing on about that image link. Linking to google.com becomes <a href="http://www.google.com/"> which is the first part of the link. Making the image from above becomes <img src="http://www.triplebunnyhappiness/7819/1.jpg">. So thus far it would look like: <a href="http://www.google.com/"><img src="http://www.triplebunnyhappiness/7819/1.jpg">. By now, both of the necessary tags have been opened, now all that is needed is closing them. <a> was the first tag opened, then <img> was opened. Now the <img> tag needs to have </img> following it, followed by </a>

<a href="http://www.google.com/"><img src="http://www.triplebunnyhappiness/7819/1.jpg"></img></a>

This work can be tedious at times, and seem very stressful. I personally would recommend using Macromedia Dreamweaver for assistance on HTML, along with the site W3SCHOOLS.COM. Visiting that site, or simply doing a google search on 'learn html' will pull up numerous results.

Helium, Inc.
200 Brickstone Square Andover, MA 01810 USA