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.

While looking through Yahoo Answers I came across this question:
How do I format my post on craigslist?
When I typed a couple of paragraphs in the message field on craigslist and clicked “continue” all the paragraphs appeared mushed together. How do I seperate them???

Thanks!

I’ve decided to share with you all the template that I use for posting to craigslist along with an explanation of how to edit / customize it.

Here is the template, with a few inline explanations:

<table width=”600px” bgcolor=”#f3f4ee” border=”1px” cellpadding=”5px”>
<tr>
<td>
Text here will not be centered
<center>
Any text entered here will be centered. Any text appearing outside of either the staring or the ending center tag will not be centered.
</center>
<p>If we type a long string of text without breaking the text will run into the edge of the table and wrap back around.</p>
<p>If we want to break a line of<br /> text we use the line break.</p>
<p>Otherwise the text will display all on the same line, unbroken.</p>
<center>
<img src=”http://www.yourdomainname.com/yourfolder/image.jpg” border=”0″>
</center>
</td>
</tr>
</table>

When rendered by craigslist, it should look something like this:

Text here will not be centered Any text entered here will be centered. Any text appearing outside of either the staring or the ending center tag will not be centered. If we type a long string of text without breaking the text will run into the edge of the table and wrap back around. If we want to break a line of text we use the line break. Otherwise the text will display all on the same line, unbroken.

The width has been reduced in this visual representation so that it will fit on this page.

Now, the explanation:

The <table> tag begins the table, and the </table> tag at the end, ends the table. The width=”600px” is an attribute that modifies the table tag. It tells the table that it will have a width of 600 pixels. You can change this number to change the width of the table. A lower number will make the table more skinny, while a larger number will make it wider. The bgcolor=”#f3f4ee” tag sets the background color of the table. The color is in hexidecimal form. You can get different colors to use here. The border=”1″ attribute tells the table to display a 1 pixel border around its contents. You can set this number to zero and no border will display, or set it higher for a thicker border. And finally, the cellpadding=”5px” attribute tells the table to add 5 pixels of space between it and the border. This can be changed as well, with expected results.

Next up is the <tr> tag, this defines the start of a table row which is ended when you are ready to end the row and start a new row. In this template, we have all of the contets displaying on one row, so you will only need to start and end one table row.

The <td> stands for table data. This is essentially the cell of the table from left to right. It is ended with a </td> tag after we are done entering that cells contents. Because this template us only one row, and does not utilize more than one cell, we will only be ending this tag at the end of the template.

The next tag is the <center> tag. This does as you may expect, it centers whatever code or text is in between the opening tag and the closing tag within its container. In this case, the container is the cell, which is contained by the row, which is contained by the table, which has a set width of 600 pixels.

You will then see the <p></p> tags. These tags are positioned at the beginning and the end of a paragraph. They force line breaks which set them off from other paragraphs or elements which would otherwise appear beside, above, or below them.

After that, I used a line break tag, <br /> to show you what a line break looks like and how you can use it. You will find this tag in the middle of the sentence that starts “If we want to break a line of …” This tag actually contains the start tag and the end tag in one. The start tag is denoted by the <br and the end tag by the />. Please note that there is a space in between the br and the /.

You will then see an image tag surrounded by center tags. The image tag appears as:
<img src=”http://www.yourdomainname.com/yourfolder/image.jpg” border=”0″>

The attribute src=”http://www.yourdomainname.com/yourfolder/image.jpg” denotes the source, or location of the image. You can utilize a service such as photobucket to upload your images so that they can be referenced in this fashion. The border=”0″ attribute is simply telling the image to display a border of zero pixels. While this may seem odd, some browsers display a border around images by default, by defining a border of zero pixels, we are telling all browsers to display the image with no border at all, regardless of their default. You can change this to a positive number in order to display a border. Although this is a completely acceptable way to post images, it is much more simple to utilize the add images feature that craigslist already has.

Then you will see the closing tags, </center></td></tr></table>.

So, there you have it. All you need to do is copy the text template above into the craigslist ad submission form, change the text information, remove the various tags that you do not wish to use (such as the image tag if you are not going to be posting an image), and then post your ad.

If you have any questions, please leave them in the comments section below.

 Loading ...