The basic HTML code looks like this: The image name should have a trailing .gif or .jpg(JPEG) depending on which type it is. As with all html file names, no spaces are allowed.
You will want to add other attributes to the image tag. align is the most common attribute. For the align attribute directions are left and right or top, middle and bottom. You should also specify the height and width of the image. If you don't specify the height and width, it takes the browser longer to load your image. We don't want that!! Finally, image tags should have an alt tag describing in text what the image is about for users who are blind or have images turned off. The final typical image tag would then look something like this. <img src="imagename.jpg" align="direction" width=xxx height=xxx alt="My dog Fred, licking a popsicle" />, where xxx is the number of pixels.
Some examples follow. The browser view is shown with the HTML text directly below. |
||||||||||||||
|
One last thing: As a beginning web designer, I recommend that you put all of your images in the same folder that your html documents(Wordpad) are in. However, as your website becomes bigger it may be an advantage to organize images into their own folder(s). Your tag would then have to change to show the pathway to the image folder. If all of your images were in a folder called, "images" for example, the code would look like this. <img src="images/ball.jpg" etc .... />