Images
Images are important parts of Web pages. HTML and XHTML allows you to place images in a Web page and assign attributes to control size and placement. In this next section you will learn about image and image coding.
The image source tag is a single-part tag. It is:
Here's an example of simple image placement:
The code for the image is:
The information in the code tells us that the image name is "dogonhat.jpg" and that it is located in the images folder of the Web site. You may review how to set up an images folder and the folder structure of a Web site by clicking here. The code also specifies that the size of the image is 205 pixels wide and 170 pixels high.
NOTE: There are three image file types that can be used on the Web. They are JPG (Joint Photographers Experiment Group), GIF (Graphics Interchange Format), and PNG (Portable Networks Graphics). For more information about these three types of file formats, click here.
Image dimensions are specified as attributes. Specifying dimensions assures that the browser will display the image as you wish. In addition, you can use the dimension attributes to manipulate an image to your advantage. For instance, below is a very small image displayed in its "natural" size, 2 pixels wide by 2 pixels high:
Can you see it? The image is so small that on some monitors it is nearly invisible. However, we can cause it to be displayed much larger by changing its dimensions. Here it is 40 pixels wide by 40 pixels high:
The code for image is:
Because in both instances the same image is being displayed, there is no delay caused by multiple downloads or by having a larger file size.
Here is the same orange dot displayed as a line:
The code is:
Note: Changing an image's dimensions in the HTML code does not actually change the image itself. You are only telling the browser how to display the image. Causing a small image to be displayed large does not increase file size or download time. Conversely, give a large image smaller dimensions does not improve download times for file size.
Beware when manipulating photographs, certain types of drawings, and any image that has fine lines, fades, feathering, or other subtle effects. Making a small image to be displayed larger than it's default size requires "spreading" the data (in the form of pixels) of the image over a broader area. The result will be loss of detail and pixillation.
On the right is a photograph that is displayed at its default dimensions, 150 pixels wide by 100 pixels high.
Here is the same photograph with the dimension attributes set to 400 pixels wide by 267 pixels high. Note that the image is highly pixilated.
Images can have the alignment attributes of left and right. The syntax for the alignment is:
<img src="yourimage.gif" alt=" align="right" />
Alt tags are special attributes that are applied to images to explain what the image is and what it is about. Individuals who are visually impaired often rely upon a screen-reading Web browser to "read" the text of a Web page to them out loud. An image's alt tag will be read by the application. This makes in imperative that alt tags were well-formed.
Many search engines also use alt tags as a component in their algorithms that calculate result placement. As with screen reading browsers, search engines rely on properly written alt tags.
Below is an image that has an alt tag applied to it.
The alt tag for this image is "Green 1940 Ford Deluxe hot rod automobile" and it the entire image tag is: