Inserting graphics

By using images on our web pages, we can provide extra information that may not be communicated with words alone. To display an image on your web page, it must exist and be available. An image can be created with an image editing software like Fireworks or PhotoShop. There are three popular formats that HTML supports: JPEG, PNG, and GIF. Any image editing software should provide you with an option to save your images with one of those three file formats.

To place an image, use the <img> tag with the src attribute. For example,

<img src="http://www.scriptbuzz.com/images/script-buzz-logo-small.jpg">

will produce

Image file formats

To display images in a web page browser, they have to be in a specific format. If your graphics were in the Windows Bitmap file format or Macintosh Picture File (PICT), browsers won’t be able to show them. Therefore, graphics have to be in a specific format that the browser can understand for displaying. The most commonly used image file formats understood by browsers are GIF (Graphics Interchange Format) and JPEG (Joint Photographic Experts Group).

ALT property

With the ALT property, you can specify alternative text for your image. Why use this ALT property? Well, there are several reasons to use alternative text. First of all, the alternative text is displayed while an image is being downloaded. This is noticeable if you’re using a slow connection to access a webpage that has a huge image. Secondly, alternative text is useful to those browsers that cannot read graphical content. Third, alternative text indicates to search engines what the image is all about. Lastly, the alternative text is displayed when an image is missing.

So how we use this ALT property? To add alternative text to your image, simply add the ALT property to the image tag. For example,

<img src="http://www.scriptbuzz.com/images/script-buzz-logo-small.jpg" alt="Script Buzz Logo">

will add the alternative text “Script Buzz Logo” to our image. To verify that alternative text is correctly displayed, open your webpage in a browser and hover your mouse over the image and your alternative text should be displayed. You can verify that the alternative text (“Script Buzz Logo”) is displayed below when you hover your mouse over the image :

Controlling image size

With the width and height properties of the <img> tag, you can control the width and height of an image. You should not use these values to make a large image display smaller on the browser window. If you need to adjust the size (width and/or height) of an image, do that in an image editing software. Then use that new image with new width and height values. Note that though specifying these values is optional because if you don’t the browser will calculate dimension for the size of your image. But if you do specify those values, you will save the browser from calculating the dimensions and that turn make the pages load faster.

The following example shows how to add width and height for a particular image,

<img src="http://www.scriptbuzz.com/images/script-buzz-logo-small.jpg" width="200" height="33">

The order of these two attributes (width and height) does not matter :

<img src="http://www.scriptbuzz.com/images/script-buzz-logo-small.jpg" height="33 width="200"">

In both of these instances, we specified that the width is 200 and the height is 33; the result is:

However, if you change the width and height for the same image as:

<img src="http://www.scriptbuzz.com/images/script-buzz-logo-small.jpg" width="100" height="40">

This will distort the image and it will look like:

To avoid distorting images, use the actual values for the width and height of an image.

Image border

To add a border around an image, simply use the border property, as shown below:

<img src="http://www.scriptbuzz.com/images/script-buzz-logo-small.jpg" width="200" height="33" border="5">

That will result in a border thickness of 5 (measured in pixels) around the image

By default, the border property of an image is 0 but if you make an image a link, then, it automatically has a border thickness of 1, as shown with the code below:

<a href="http://www.scriptbuzz.com"><img src="http://www.scriptbuzz.com/images/script-buzz-logo-small.jpg" width="200" height="33"></a>

That will result in:

If your image is a link and if you like to hide the border around the image, you can set the border to 0.

Controlling image alignment

With the align property inside the <img> tag, you can indicate how the image should be aligned in relation to the text on the page. As you work more with the align property, you will learn that it offers limited control over how you can align the image relation to the surrounding text on the page. With the align property, you can choose to use either vertical or horizontal alignment.

Vertical alignment

When you use vertical alignment, the image is placed on the left-hand-side and the text is placed on the right-hand-side. With the vertical alignment, there are three possible alignment values that are accepted in all versions of HTML and those are: bottom (default), middle, and top. With the align property set to bottom, text aligns with the bottom of the image. When the image align property set to middle, text is aligned with the middle of the image. The text is aligned to the top of the image when the image align property is set to top. Figure 1 shows the effects for each of these possible alignment values.

As the examples in the figure 1 show, use of vertical alignment can be useful only if you a one line of text to go with the image or if your image is as small as the size of the text line. Table 1 shows the necessary code for each alignment property shown in figure 1.

Horizontal alignment

By using the horizontal alignment, you can align an image either to the right or left of the page. If your image is smaller than the current line, text adjacent to the image will automatically wrap to the next line. See figure 2 as an example.

Table 2 lists the necessary code to produce the output shown in figure 2. Notice with horizontal alignment, the text can be wrapped on left or right. In the first example, the image is placed on the left hand side while the text wraps on the right hand side. In example two we have the exact opposite: the image is on the right hand side and the text wraps on the left hand side. The last example shows how to turn off wrapping with <br clear=”left”>. IF you do not turn off wrapping, your text will continue to wrap as long as there is avialble space. Note if you were using right alignment, you would use <br clear=”right”> because the value of the clear must match to the alignment value for this to work correctly. If you decide that you want to place the image in the center of the page and around the image, you may want to consider using a table.

Controlling vertical and horizontal space

When some text wraps around an image, it may appear too close to the image. To increase the vertical and horizontal space around the image, use vspace and hspace properties inside the img tag, as shown:

<img src="http://www.scriptbuzz.com/images/html/HTML.gif" vspace="15" hspace="15">

The vspace (vertical space) property increases the vertical space above and below the image by 15 pixels. The hspace property increases the space to the left and right of the image by 15 pixels. See the following output as an example:

The following is the code for the above output:

Some text above the image.<br>
<img src="../images/html/HTML.gif" width="133" height="36" border="1" alt="HTML" title="HTML" align="left" hspace="15" vspace="15"> Some text on the right. <br clear="left">
Some text below the image.