Images: How to do img

In honor of Frumhouse and her JPIX carnival and
Batya and her Back in the Saddle Haveil Havalim

My plan is to familiarize you with HTML image code, so when you put up an image, you can fine tune it as you need.

Here’s how an image tag might look:

<img src=”” alt=”garlic” >

The url where it is located is found inside the src section of the tag. An easy way to find out what the url for an image is, if the image is loaded on the web, is to right-click on the image, select View Image and copy the url from the browser locator. (These are Firefox commands; I recommend Firefox as a browser).

What is the purpose of the alt tag? The alt tag is alternative text if for some reason the image can’t load or if one is visually-impaired and needs to hear the text.

Let’s use my little garlic image as an example:

Let’s say I want to see my little image of garlic twice as large. The best way would be to go to the original and create a larger size. But perhaps 1) you don’t have the original 2) you are lazy and/or pressed for time. I use height and width attributes:

<img src=”” alt=”garlic” height=”160″ width=”160″ >

And my little garlic is twice as big:
You see that it’s smudgy and blurry. This technique works better in reverse, when you have a larger image and you want to reduce the size:

<img src=” alt=”garlic” >

I right-click on the image, select Properties, and I see that it is 800×490.

I divide those numbers in half, so I get:

<img src=” alt=”garlic” width=”400″ height=”245″ >

which looks like:

If you want to make a backup of a long post, I recommend copying the code of the post. That way, all your images are preserved as image tags, and if the images remain online while the code/text does not, you should be able to see everything once again from your backup code if you copy that into the code section of your blogging software.

There’s more tricks one can do with image code. Let’s say you want the image moved ever so slightly to the left: you can use style=”margin-left: 5px” and put it into the code like so:
<img src=” alt=”garlic” width=”400″ height=”245″ style=”margin-left: 5px” >

Your blogging software might add something called a float to your image. You can manipulate floats as well. If you are interested, leave me a comment, and I’ll talk about floats in a future post.

I hope at least some of this gets you used to looking at code so you can manipulate it as needed for your blog projects. Feel free to ask questions or to steer me toward a different technical explanation post.

 More about images and img tags

Share:Tweet about this on TwitterPin on PinterestShare on FacebookShare on Google+

8 thoughts on “Images: How to do img

Please write a comment! I love to hear from you.

Your email address will not be published. Required fields are marked *