Link Basics

Difficulty: Beginners/Intermediate Html/CSS

How to code an image

Ever wonder how to get a image on your myspace page or on your blog? well the following code below is the key to producing an image on to your page. <img src=""> Now Image hosting sites aren't there for no reason, if you don't have your own website or hosting site, sites like image shack.us, Photobucket.com, and imagehustler.com are there to host your images for free. Now go o my links pages and click on on of the links and host the image you want to add to your website. when the loading is done you will get a bunch of links, some that are already coded for you. Copy the direct link or URL and paste into the image codes right between the ""
For example, i hosted the following image I copied the direct link and pasted it into the image codes <img src="http://www.imagehustler.com/0607/1187902323.gif"> and there you go, done.
Extras:
Borders <img src="" border="0"> <img src="" border="1"> set it to a certain width or height with no border <img src="" width="100px" > <img src="" height="100px"> <img src="" width="100px" height="100px">

How to link a image

While the image codes stay the same and so does the link codes we are going to combine the following codes below to link an image. the purpose of this is if you have a button for a website and you need to link that button to the website, or if you have a small image preview that needs to be linked to the full size. The link code: <a href=""></a> The image code: <img src=""> the combined result: <a href=""><img src=""></a> Variations:
To open in a new page <a href="" target="_blank"><img src=""></a> to not have a border <a href=""><img src="" border="0"></a> set it to a certain width or height with no border <a href=""><img src="" width="100px" border="0"></a> <a href=""><img src="" height="100px" border="0"></a> <a href=""><img src="" width="100px" height="100px" border="0"></a> you can edit the 100px to whatever size you want the image to be 100px is the size of live journal icon or forums icon. Now that you have an idea on how to edit image and link codes now its time for an visual example. <a href="http://www.silentatmosphere.com/"> <img src="http://i14.tinypic.com/4p0pgtf.png" border="0"></a> will result in

How to align an image to the right or to the left

They look nice in blogs and articles or even a short passage. by putting the following align="left" or align="right" into your image codes you can make your blog, article or even mini bio look much better. <img src="" align="left"> <img src="" align="right"> There are the codes, heres the visual example.
The following image will be used:
Heres an example of what will happen when you don't add align="" into the image codes. the words are moved to the very bottom of the image.
Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah

Result of Align="left":
Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah

Result of Align="right":
Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah