Lesson 9 – Images

An article by John Schilling    No Comments

Images are the most simplistic form of media that we can display on a web page.  Images can range from a full background picture down to a thumbnail image.

To create an image, we use the <img> tag.  The src attribute of the <img> tag tells the browser where it can find the image.

<img src="http://www.yourwebsite.com/images/imagename.jpg" />

Notice that just like the <br /> tag the <img> tag does not have a closing tag and must be closed with a />.  Just like the <a> tag, the src attribute can be absolute or relative.

You can use  JPEG (.jpg or .jpeg), GIF (.gif) or PNG (.png) files in the image tag.  Typically JPEG files are used for pictures or photographs and GIF files are typically used for simple graphics.  The PNG format is mostly the combination of the JPG and GIF.  It also supports alpha transparency.

The images you include do not have to be the exact size of the image you include.  You an adjust the width and height of the image using the width and height attributes of the <img> tag.

<img src="http://www.yourwebsite.com/images/imagename.jpg" width="150" height="100" />

Another very important attribute of the <img> tag you should always use is the alt attribute.  The alt attribute is the alternate description of the image which is essential for people who cannot see or if someone has images turned off in their browser.

<img src="http://www.yourwebsite.com/images/imagename.jpg" alt="A sample image" width="150" height="100"/>