These are some much used html linking codes that most people can or do use on a daily basis.
These were originally written for another resource but hold true for anyone’s use. Enjoy.
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….
- CODE:
<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.
Basic Image 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 sit or to another site.
Example;
And here is the code used to create the linked image…….
- CODE:
<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.
- CODE:
<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>
Just 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…
- CODE:
<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………
- CODE:
<strong><big>·</big></strong>
And here is the actual code we used in the example above…
- CODE:
<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 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. 
.
.
You can do the same thing and have the image on the left side also……
Here is a sample code you use to create this effect…..
- CODE:
<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.
Youll notice in the code sample you can use the same attributes that you do with basic image code and linked image code. You can resize, make the image a link, choose borders or not and if it opens on a new page or the same page.