Radio Show

Multimedia Fusion2

MMF2 Help

Graphic Design Assignments

Photoshop Tips and Tricks

Website Assignments

Website Tips and Tricks

Adding an Image in HTML

First you need to get a picture to put on the page, if you are doing this online then follow these instructions:

When you've found the biggest resolution version of your picture, right click on it and select "Save Image As" option. This will let you save the picture wherever you want on your computer. Choose to save it in the exact same folder as your HTML files (unless you know what you are doing and can modify your code). While saving it, take a special note of WHAT is being saved. Chose to give the picture a very simple name, one word, or two words joined by a '_' For example 'cool_car.jpg' One last thing to take note of. Pictures are saved as different files, they have different "file extentions." You will see this directly under the filename. JPEG is the most common.

If you have a picture saved on your computer follow these instructions:

Copy that picture and paste it in the exact same folder as your HTML files. Its best if you can change the view setting to see details instead of thumbnails. If the name of the picture is very complicated, you will probably want to change it to something simpler, without spaces. Also- take note of the format of the picture- this is the file extension after the 'filename.'

These are the most common picture formats, you will have to use the exact right one to make your picture work

jpg -- this is the most common type of picture,
jpeg -- for some reason, some pictures are saved weird and need an extra 'e' in there
gif -- another common picture, these can be animated
png -- also common, these keep transparency information, to avoid having the ugly white box
bmp -- turns up every once and a while, stands for bitmap

This is the base tag for an image:

<img>(no end tag)

However if you actually want an image to show up (its a lot to ask sometimes) you need an important attribute. "src" stands for "source" think about it as a guy pointing to where the picture can be found.

<img src="filename.fileextension">

There are all sorts of other attributes you can have for your images like width, height, something to display if the image is broken (alt="...") postion of the image, and letting other text wrap around the image. To find out everything you can do with images go to