URL to HTML Link and Image Converter

What does it do?
I’m glad you asked. This little gem will convert a URL (Uniform Resource Locator) into either HTML Link text, or into HTML Image text. There are a few other bells and whistles, such as the ability to add an alt text attribute to the image tag, or a target attribute to the link tag. (see the directions below for more information)

Why?
My wife has her own blog, The Modern Hippy. Back before she was using wordpress, her blog was with blogger. She asked me how to make links and images show up in her posts because she didn’t like the way that blogger was doing it. I explained about HTML and how it required code to be processed in order to achieve her desired result. I showed her how to do it and she was content. A little while after I noticed she had written the code in a word document and was copying it each time she wanted to use it. This made me want to make an easier tool for her to use. Voilà!

Directions:

  • Insert the URL you would like to use in the ‘URL to make into HTML Link or Image Tag’ field.
  • Select which you would like, an HTML Link or an HTML Image tag.
  • Click the ‘Make Tags’ button.
  • Select additional options and click the ‘Update Code’ button to apply them.
  • Copy and paste the text wherever you need it to be.

More detailed directions as well as troubleshooting steps can be found below the converter.

Detailed Directions:
Quite simple really.

  • Enter the URL of the image you would like to display, or the location you would like the link to go to when clicked.
  • If you are trying to make a link:
    • Visit the page that you would like to link to.
    • In the address bar at the top of your browser, you will see the URL. It will begin with http. Select all of this text and copy and paste it into the ‘URL to make into HTML Link or Image Tag’ field.
    • Click the circular button that is labeled ‘Make an HTML Link Tag.’
    • Click the ‘Make Tags’ button.
    • The page will load new information for you to review.
    • Directly underneath the text field where you entered the URL a message will display telling you if the URL appears to be valid, or if there was a problem. If a Warning displays, see the troubleshooting section below.
    • You will now be presented with further options that will modify your link text.
    • The Link Tag Options: Include Title Attribute, and Open link in a new window / tab.
      • Include Title Attribute: The text that is entered into the title attribute will display whenever anyone hovers over the link. Like this.
      • Open link in a new window / tab: This will add a target=”_blank” attribute to your link. This will make the page that displays after your link is clicked open in a new browser, or in a new tab.
      • Clicking and placing a check in either of these check boxes and then clicking the ‘Update Code’ button will display the code with the desired selection added.
    • Below the text area with the link is a ‘Test your link here’ link. This, when clicked, will attempt to visit the URL you entered in a new window or tab.
    • To copy your link, click inside the text area and then right click > copy.
  • If you are trying to make an Image tag:
    • Locate the image that you would like to link to online.
    • If using Internet Explorer, right click on the image > Properties then highlight the information next to the ‘Address (URL):.’ It should begin with http. Right click > copy and then paste it into the ‘URL to HTML Link and Image Converter’ field.
    • If using Mozilla Firefox, right click on the image > Copy Image Location. Then paste the image location into the ‘URL to HTML Link and Image Converter’ field.
    • Click the ‘Make Tags’ button.
    • Directly underneath the text field where you entered the URL a message will display telling you if the URL appears to be valid, or if there was a problem. If a Warning displays, see the troubleshooting section below.
    • You will now be presented with further options which will allow you to modify your link text.
    • Image Tag Options: Include border=”0″ Attribute, and Include Alt Text Attribute.
      • The Include border=”0″ Attribute will add an attribute to your image tag which will make it display without a border, regardless of the browsers default. The zero can be changed to a positive number in order to display a border of that many pixels.
      • The Include Alt Text Attribute will add the Alt Text attribute to your link. This text is displayed if your image cannot load. It is also used by screen readers, or text-to-speech programs in order to help the blind. The Alt text will be read aloud by the program to the blind person. Also, this is used for SEO purposes when spiders attempt to determine what this image is a picture of.
      • Clicking and placing a check in either of these check boxes and then clicking the ‘Update Code’ button will display the code with the desired selection added.
    • To copy your link, click inside the text area and then right click > copy.

Troubleshooting:
I apologize if you are having trouble. I tried to think of everything, and have even identified a few things that I haven’t been able to fix just yet. Check the list below for possible problems and their solutions.

  • The link I’m trying to convert starts with https, not http. What do I do?
    • This is something I didn’t plan for when creating this converter. If you are creating a link, after you copy the code look for the href=”" attribute. In between the quotes you will see the http text, add an s after the http and you should be fine. This works in the same fashion with the image converter, only it applies to the src=”" attribute.
  • Found another problem? Shoot. I’m only one man. Click here and scroll to the bottom of the page. Use the form to tell me what happened. I’ll do my best to correct the problem and get back with you.

Related Articles:


Web / Graphics Designer Looking for Work

Well I’m looking for a job. Full-time. Know of anyone that’s hiring?

I posted an ad on craigslist under the resumes section, but I do not have much professional experience as a Web / Graphics Designer so I decided to do something a little different to show off my mad skillz.

This is what I posted to craigslist:

plaque URL to HTML Link and Image Converter

As you can see, it is a link which will take you to the live site. Feel free to click the link, it will open in a new tab / window.

I received a reply very shortly after posting, but I don’t believe it is for a full-time position. We shall see however.

Although it will be gone soon, here is the url of the post: http://bellingham.craigslist.org/res/1098600398.html

Related Articles:


Get your own Online Store

Have you been thinking about starting up your own online store (webstore)?

I present to you:
 URL to HTML Link and Image Converter

This is really wicked. ProStores is an eBay Company which is dedicated to helping their subscribers succeed. Take a look for yourself, it’s really quite impressive what they offer. Click the link above and it will open in a new window, then you can follow along with the rest of this article.

Want to see some examples of what can be done?
Click on the [successes] link at the top of their page. Here you can see some of the websites that use ProStores to help them succeed.

Think you will need some guidance?
No problem. Click the [quick tour] link at the top of their page next for a step-by-step walk through of the process.

Who better to help you succeed than professionals?
Along with a long list of services, ProStores has everything you need to start selling online Today- shopping cart, domain hosting, merchandising, reporting, and more!
 URL to HTML Link and Image Converter

Are you ready for the best part?

 URL to HTML Link and Image Converter

That’s right, one month FREE! What have you got to lose?

Related Articles: