HTML - Images

Now that you've got an idea of what an attribute is, we'll start to really use them. The image tag <img src="picture.gif" /> introduces several new attributes. So let's jump right in to a coding example and then I'll explain it.

<img src="picture.gif" border="0" align="right" alt="My Picture" height="100" width="110" hspace="3" vspace="3" />

What's that you say? A lot of attributes? Well, you're right. The good news is that there are two types of attributes, required and non-required. Whether an attribute is required depends on the tag. For the image tag, only src="" and alt="" are required. All the other attributes are for further customization so that you can get your Web page to look just the way you want it. Although, I recommend that along with the required attributes, you should always use height="", width="" and border="".

The src="" attribute specifies the location of the image file you want to display on your Web page. So, if your image and html (Web page) file are in the same folder, it would look like this: src="picture.gif". You must put the whole filename and path of the image. Now if you had your image in an "images" folder that was at the same place your html files are, it would look like this: src="images/picture.gif".

The alt="" attribute seems unnecesary, but IS required. This attribute is used to describe the image and is especially useful for those who browse the internet without images and only with text. This way, the user knows what it is and what it's used for. Here's an example: alt="This is my image" Feel free to put in spaces and the like. But make sure you don't use quotes "".

The border="" attribute specifies if and how thick to place a border around an image. Values for the border attribute can be percents % and integers. If you use border="0", there will not be a border.

Since we've already used the align="" attribute, there isn't much more I can tell you about it. The values for the image tag are: top, middle, bottom, left and right. Play around with them in the Practice section near the bottom of each lesson.

The height="" and width="" attributes can usually be determained by your HTML editor. Otherwise they can be difficult for the beginner to know what values to put in them. These attributes contain the exact height and width in pixels. A pixel is a graphical unit of measure. One way to find out the pixel values of an image is to open it in Adobe Photoshop, then in the menu, go to "Image" and then "Image Size". Alternatively, you can right-click on the image in a browser and select "Properties". (Internet Explorer only.)

Probably the least used attributes for the image tag are hspace="" and vspace="". These refer to "horizontal space" and "vertical space" respectively. By using these attributes, you can specify the amount of distance between the image and the text around it. The values for these attributes are also in pixel measurement.

Here's an example of an image with a paragraph:

<p><img src="images/sample.gif" border="3" alt="This is my sample picture" align="right" height="50" width="150" hspace="0" vspace="0" />If you need help with or want to learn HTML/XHTML, you've come to the right place. The links below will guide you through the official SCSU HTML Tutorial. This Tutorial was desgined to be simple and user friendly. Even if you do each lesson, the maximum amount of time it should take to complete is no more than a couple of hours.</p>

This is what it would display as:

If you need help with or want to learn HTML/XHTML, you've come to the right place. The links below will guide you through the official SCSU HTML Tutorial. This Tutorial was desgined to be simple and user friendly. Even if you do each lesson, the maximum amount of time it should take to complete is no more than a couple of hours.

Now you try it out. Remember to try changing the values of the attributes.

Practice

An addtitional note about images: you can only use images in the .gif and .jpg formats on the Internet.

Now you're ready to move on to Linking.

Featured Web Site

Internet Factoids