One of the biggest and most asked questions when we get new clients is using simple html for making links, showing images, making tables and things that you may use daily when managing your website.

Here is a small listing of some HTML snippets and codes you can use every day……

Basic Text Link;

This is a basic text link that you can use to link to other topics or parts of your site. This word :Example:  is a basic text link.

Here is the code for creating a text link like this one….

<a href=”http://www.zblogs.us” target=”_blank”>:Example:</a>

As you can see a link always starts with <a   and ends with  </a>  Another thing to note is if you want the link to open in the same browser window or open up a new browser window. You accomplish this using the  target=”_blank” for a new window or target=”_self” to open it up in the existing window.

Picture Link;

This is a link using the image as the link itself. Lots of people use this one for adding to articles or creating buttons that link to other pages within their site or to another site.

Example;

Here is the code for creating a simple image link……….

 <a href=”http://www.zblogs.us” target=”_blank”><img src=”http://www.zblogs.us/ads/zbhminiad2.jpg” alt=”visit ZBlogs today for your free blog” border=”0″ /></a>

As you can see we used the same parts of creating a basic text link, but once you have the link part of the code just after “> then you need to add the image part. This part <”img src=  is where the code finds the actual image. So the address(url) for that image needs to go between those quote marks and then don’t forget to close out the img part of the link with </a>. Our example uses an image on our site, but your image could just as easily be at any image hosting site as well as on zazzle and other places. Another thing to note is the use of alt=” ” – what this does is gives a text value for that image. Since most search bots cant see images they just use the code this will tell search bots what the image is. You will also notice the border=”0″ You can set this number 0 to any number you want to create a border around your image.  You can also resize your image by adding actual height and width code to the link. Simply add in heigh=”200″ width=”400″ of course changing the numbers to the actual size you want the image to appear as. Great way to keep your larger images on file but only use a smaller version of it.

Here is an example of the same code using resized images……

<a href=”http://www.zblogs.us” target=”_blank”><img src=”http://www.zblogs.us/ads/zbhminiad2.jpg” alt=”visit ZBlogs today for your free blog” border=”0″ height=”35″ width=”125″ /></a>

Showing an Image;

Sometimes you may just want to have a plain image to show with no links or anything associated with them.

Example;

Notice that this image is not linked or clickable.

Here is the code for just displaying images…

<img src=”http://www.zblogs.us/ads/zbhminiad2.jpg” alt=”visit ZBlogs today for your free blog” border=”0″ /></a>

  You can also still use the resize feature for showing just images also like shown in the linked image example above.

Bullets Beside Your Text Links;

Lets say you want to put a little bullet  ·  besides your links like in a menu. This is a very simple one, yet thousands dont know how to use it. Here is the code needed to add this to any text link………

<strong><big>·</big></strong>

 Here is an example;

·Link 1

·Link 2

·Link 3
And here is the actual code we used in the example above…

 <strong><big>·</big></strong><A href="">Link 1</a> <br>

 <strong><big>·</big></strong><A href="">Link 2</a> <br>

 <strong><big>·</big></strong><A href="">Link 3</a> <br>

Text with an image floating to right side;

  This comes in handy when you want to show a sample image within something your writing like an article.

 This will show your image to the right of everything your write....

 A paragraph with an image. The align attribute of the image is set to “right”.

The image will float to the right of this text like you see here.

 <img src ="http://www.zblogs.us/ads/gulfcoastblues.jpg" align ="right" width="75" height="48"> A paragraph with an image. The align attribute of the image is set to "right". The image will float to the right of this text like you see here.

Text with an image floating to left side;

 This comes in handy when you want to show a sample image within something your writing like an article.

 This will show your image to the left of everything your write....

A paragraph with an image. The align attribute of the image is set to “left”. The image will float to the left of this text like you see here.

<img src ="link to your image" align ="left" width="75" height="48"> A paragraph with an image. The align attribute of the image is set to "left". The image will float to the left of this text.