Advanced Tutorial on Coding links and images

This tutorial was graciously provided by a fellow flirt, M.C.

**This is an *advanced*  tutorial that gets into all the nitty gritty on coding links and images. If it seems too complicated, that’s ok! I have a beginners tutorial that might be a better fit for your experience level :)**

 

Lets say you would like to add an image to your listing. How is it done?

Actually it’s not as complicated as it may seem. Here is what you want to do.

First you need to have your image hosted.

You can find a tutorial on how to do that here!

Now you need to tell the search engines where that image is located. By giving it a url or “path” to find your image on. Like this….

<img src=http://www.mistressjanedoe.com/images/imagenamehere.jpg>

which breaks down like this

hyper test mark-up language http  is directing you to mistressjanedoe.com

Then to your folder named images where you have housed your image

and finally to the image itself imagenamehere telling what size and type of image it is

Make sure you add the beginning and ending carrot < >and all the  signs where needed. Without them the image will not work.

Note.. You can change the image size here if you like but this is really NOT the best way to do that. Use a graphics editor whenever possible.

Here is what that might look like..

<img src=http://www.mistressjanedoe.com/images/imagenamehere.jpg width=290 height=28 >

If you want the image sized relative to it’s proportions, you can also just use width OR height- it will automatically change the other variable as well so the image keeps it’s proportions.

Now lets say that you want to make this link click-able. Meaning you would, for example, like to have a customer to be able to click on an image and have it take a customer to another one of your listings or maybe an assignment you have created.

That will be done like this….

<a href=http://www.mistressjanedoe.com/users/mistressjanedoe><img src=http://www.mistressjanedoe.com/images/imagenamehere.jpg width=300 height=38></a>

Notice the beginning carrot  with attribute <a     that opens this string of code and the ending </a>

The first part above is the link you want the button to go to when clicked. The second part is the image address, as explained above.

This encompasses both the hyperlink url coding AND the image coding and now makes your image into an active link. 

On some browsers, if you don’t tell the code not to have a border around the image, it will show a blue box around any clickable images like this. To prevent this, we simply add border=”0″ within the image code, like this-

<a href=http://www.mistressjanedoe.com/users/mistressjanedoe><img src=http://www.mistressjanedoe.com/images/imagenamehere.jpg  width=300 height=38border=”0″></a>

Now you have your image in and you have your hyperlink in and the border is gone but there is one more element that could be added to help you with SEO. (This is not necessary if you don’t want to use it, but may help with your SEO, as it helps the search engines define what that image is, and how it should be found in a search. It also provides the name of the image for those people who may be using special software to browse the web if they are visually impaired and could otherwise not ‘see’ your image. More about this is explained at the end of the tutorial.)

Again go back to your image code and this time you are going to add a little attribute called alt and you are going to add “” with the search engine keyword of your choice. Example-

alt”mistress”

Your line of code will look like this when active….

<a href=”http://www.mistressjanedoe.com/users/mistressjanedoe><img src=http://www.mistressjanedoe.com/images/imagenamehere.jpg width=300 height=38 altmistresses border=0 ></a>

and like this when it is the image alone without the hyperlink (the hyperlink being the ‘link’ where they will be directed if the button was clicked).

<img src=http://www.mistressjanedoe.com/images/imagenamehere.jpg width=300 height=38 altmistresses  border=0>

Note From an SEO perspective, ALT attributes may or may not benefit your website or listing – there is still no conclusive evidence on the subject. It was originally created to alert bind people, using screen readers, (or text only web browsers) that images were on the page

But Most people will agree that using alt is another opportunity for you to put code on your web-pages and listings that the search engines will read, and should be taken advantage of.

Quote from SEO website….

“Keep in mind some of these tips on how to use the alt

  • Make them as specific and descriptive as possible without being too lengthy
  • If an image contains text, the ALT attribute should replicate the text in full
  • Avoid being vague or writing text that isn’t related to the image or context of the content around it
  • Don’t use the image’s file name as the ALT attribute”

Now you know how to …

  • Add an image to your listings or web-pages
  • Add a hyperlink to your images and make it active
  • How to add the alt attribute and encourage SEO

This is My first tutorial I hope you like it and find it useful in helping making your listings all that you would like them to be.

Good luck with it and much success in creating cash flow with your new template