Where Knowledge Rules

Computers & Technology:

Internet

Get a Widget for this title

How to create an image link

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.triplebunnyhappines s/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.triplebunnyhap piness/7819/1.jpg">. So thus far it would look like: <a href="http://www.google.com/"><img src="http://www.triplebunnyhap piness/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.triplebunnyhap piness/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.

Learn more about this author, Angel Sosa.
Contact this writer Click here to send this author comments or questions.


Below are the top articles rated and ranked by Helium members on:

How to create an image link

  • 1 of 7

    by Niamh Brown

    How to Create an Image Link

    One of the most common forms of navigation in a site these days is the image link logo. Look

    read more

  • 2 of 7

    by Angel Sosa

    For those out there, creating an image link may not be something of importance; however, look around. On the screen right

    read more

  • 3 of 7

    by Toni Laberge

    Many tools are available when creating a website. You can work in a text editor and write html code, or you can use one

    read more

  • 4 of 7

    by Bruce Bostwick

    Inserting a link to an image isn't as hard as you would think. For starters, you would need to know the basics of HTML.

    read more

  • 5 of 7

    by EMoore

    You create an image link by writing the correct html coding. This basically done by writing the code, the html page and

    read more

View All Articles on:
How to create an image link

Add your voice

Know something about How to create an image link?
We want to hear your view. Write_penWrite now!

Helium Debate

Cast your vote!

E-Commerce: Should you pay bloggers to review your products?

Click for your side.

175096

Featured Partner

Tigerlily Foundation

Tigerlily Foundation has partnered with Helium, giving you the chance to write for a cause. Browse Tigerlily Fou...more

What is Helium? | Buy Web Content | Contact Us | Privacy | User agreement | DMCA | User Tools | Help | Community | Helium’s Official Blog | Link to Helium

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