HTML - The Basics - 4


The basic tag you need to have for images is
<img src="imagename.jpg">

On the web, you can use either jpg or gif types of images. The image is always put onto the left side of the screen, at the next possible line - just like the next piece of text would be. But don't be surprised if it is a little lower than the text - an image is larger than a letter. Try it out and see.

One thing you need to be able to do is to tell the browser, through the HTML, where the image is sitting - known as its path. Put simply that means which folder it is in. So make sure you know!!

One suggestion I would make is - KEEP IT SIMPLE, STUPID!

That way you don't confuse yourself. What I do (because I am simple, stupid)is to always put my images into a subfolder called "images". In that way, I always know where the images related to eg. a particular website are. They are within the same folder as the HTML files, within the subfolder called "images". Doesn't matter if you do it this way or find your own - just do create a system and stick to it. You'll be grateful in a few months time - once you've forgotten how you did it.

Image Size

The larger the image - the longer it takes to download. So it's better to use smaller images. If you obtain an image editor (eg. with a digital camera) - you'll be able to reduce the resolution of any images you have. That helps to reduce the time they take to download.

You also can change the size of an image within the <img src>
Add within width=100 or height=200. You are actually supposed to use both, but to make that work for you, you need to know the total dimensions of the image. I don't normally, so I just use one or the other. So,
<img src="imagename.jpg" width=200>
This makes the width of the picture 200 pixels. The height will be scaled down proportionally. Try different numbers as widths and heights to see how it works.

Previous Page click for More Advanced HTML topics