Tuesday, 9 April 2013

How to Add Images in HTML

I am going to give you two simple codes, the first is an image with a border you can adjust (colour, style and thickness) and the second is an image linked to another website which opens in a new tab.

Centred image with adjustable border, no link:

The code:

<center><img style="border: 2px solid #ffffff" src="IMAGE URL" title="IMAGE TITLE" alt="IMAGE TITLE AGAIN" width="300"></center>

This code can be adjusted by changing the red text above, in the following manner:

Image URL: is of course where you paste the IMAGE URL (the URL of an image is obtainable by right clicking any image from a website or photo hosting site (for your own) and clicking on "copy image URL". See my post on the legality of using images on your blog here.

Image width: This figure is in px (pixels). You will discover that the sizing part of the code is very useful indeed. For example, you can choose what size a MASSIVE image will convert to instantly on your site. The figure at the moment is set to 300 (the last image I put on the blog) and may distort the image you use. You just need to adjust the figure bit by bit, "previewing" the results of the changes as you go along until you are happy with the images size. you can also add a height attribute directly after the width="300" (e.g. height="250") but this can further distort your image. If you use only the width attribute, the height is automatically adgusted to match the width, keeping the images original aspect ratio (look).

The border thickness: Increase the number in front of the px, to see a thicker border.

The border shape: can be adjusted by changing the word solid to dotted, dashed, groove, double, outset, inset or ridge. You will not see the border above though (please see the version in my sidebar), as my default image border display selections override the code.

The border colour: You can edit by inserting the relevant Hex Colour Code where you see the #FFFFFF (which incidentally, is the code for white). Either find which colours you are using in your Template section (go to advanced, then just copy the relevant code and insert into the above). Alternatively you can go HERE for a list of colour codes. You can also us the name of the colour for basic tones such as Black White Red Blue Yellow Green Pink Purple Brown and Orange (e.g. "border: 2px solid white").

Image title and Alt: Image Title is the wording that appears when you hover over an image. For example, if I were adding a book cover to my site and the link went to amazon for purchasing, I might have my image title as "Buy so and so book at Amazon". Title, covers all browsers, other than internet explorer. Alt does the same thing for internet explorer. Therefore we use both Title and Alt to cover ALL browsers which may be looking at your site.

Centered image with link to another site, link name displays when the cursor is moved over the image which opens up in new tab:

Nothing Like Australia
The Code:

<center><a href="URL OF WEBSITE YOU WANT THE LINK TO GO TO" title="TITLE YOU WANT TO APPEAR WHEN THE CURSOR GOES OVER THE IMAGE" target="_blank"><img src="IMAGE URL" alt="IMAGE TITLE" style="border: solid 2px #FFFFFF" width="300"/></a><center>

See above for how to get an image URL and adjust the width and height and border of the image. 
Note also that target="_blank", means the website linked will open in a new tab, not the tab/page you are currently viewing (same tab)!

This is the complete code for the above image, it is linked to a Tourism Australia campaign:

<center><a href="http://www.nothinglikeaustralia.com.au/index.htm" title="Nothing Like Australia" target="_blank"><img src="https://lh4.googleusercontent.com/-Mxaxq6KUKY4/UCXb8wrxj_I/AAAAAAAAAYE/tOITnGnZdPQ/s765/Aussie.jpg" alt="Nothing Like Australia" style="border: solid 2px #FFFFFF" width="140" height="225"/></a><center>

Inserting these codes:

You can insert the codes into an appropriate space in the HTML version of a new post, simply by pasting in your completed code.


You can go to your Layout and add a gadget. Select the HTML/JAVA option, give it a title if you wish and then paste your completed code into the "content" section of the new Gadget.

All done!

I think these codes are pretty straight forward, but if you have any questions, please let me know.


No comments :

Post a Comment

Facebook Twitter Google + RSS Feed Email Me