Using Images in an HTML Document You have learned that HTML documents are text documents. So how do you display an image in a text document? Most webpages contain images such as photos and graphics. In HTML, an image is any file that contains a picture, such as a photograph, logo, or computer-generated file. To include an image in a webpage, it must be stored as a file. This file might be a digital picture purchased from a company or a digital photo. Insight Using Pictures in Webpages Pictures can be saved in different file formats, but some formats are more commonly used because they provide high-quality images with small file sizes and fast download times. The most popular formats for pictures on the Internet are JPG (or JPEG), GIF, and PNG. Each of these file formats has advantages and disadvantages. Most people use the JPG format for photographs and complex images because JPG files support up to 16 million colors. Because GIF files are limited to 256 colors, they are a good choice for scanned images, line drawings, and simple graphics. The GIF format is licensed by Unisys, and programs that create GIF files must have a license to output files in this format. (You do not need a license, however, to use a GIF file in a webpage.) PNG files are similar to GIF files but support up to 16 million colors, and creating PNG files does not require a license. Nearly all browsers support JPG, GIF, and PNG files. To use an image in an HTML document, you must create a reference to the file location where the image is stored. If the image is stored in the same folder as the HTML document, then the browser loads the image from the same folder. If the image is stored anywhere else, the reference to it in the HTML document must include the path to the folder or drive on which the image is stored. To reference the image in the HTML document, you include the one-sided tag in the location in which you want to insert the image. When you use the tag, you must also include the src attribute to define the location (the “source”) of the image. You can also use the optional height, width, border, and alt attributes. The height and width attributes describe the image’s height and width in pixels (a pixel is a single point in an image). The border attribute describes the image’s border size (also in pixels). The alt attribute provides alternate text that identifies the image’s function or description when it is loaded by a browser that either does not display images or reads webpage content for visually impaired users. Because the alt attribute is required in XHTML, you should always include the alt attribute in your tag. For example, the code to load the image saved as lpd_logo.jpg into a webpage is as follows: This code tells the browser that the file lpd_logo.jpg is located in the same folder as the HTML document in which it appears. This type of reference is called a relative path. A relative path specifies a file’s location relative to the location of the current file. If the lpd_logo.jpg file is stored in a folder named “images” on the current drive, then the code to load the image is as follows: This reference is also a relative path because the .. in the file location indicates that the images folder is on the same drive as the current file, but in a different folder. Notice that the slash characters in the path are forward slashes. If the file is stored on a completely different drive from the current file, then the code is as follows: When the browser interprets this code, it will search drive C on the user’s device for a folder named “temp,” and then within the temp folder, it will search for a folder named “images.” Within the images folder, it will search for a file named “lpd_logo.jpg” and display it on the webpage. If the user’s computer does not have the temp\images folder, or if a file named “lpd_logo.jpg” is not saved in that folder, then the browser will display a broken link to the image or the alternate text specified for the image instead of displaying the image itself. Because this path is the only path in which the browser will search for the file, it is called an absolute path. An absolute path specifies a file’s location with absolute precision; there is no reference to the current file. Most web developers store a website’s images in the same folder as the HTML document or in a folder on the website. Usually this folder’s name is “images.” By storing all of the images in one place, it is easy to create the references to those images using a relative path. To change the text “Lakeside Police Department” to an image, you need to select the text and replace it with a tag that inserts the image. The logo file is stored in the Module.08\Module folder included with your Data Files. To insert the image in the HTML document: 1 Switch to your text editor, and then select the text Lakeside Police Department between the and tags. sidenote Tip: Be careful not to select the opening and closing tags or your page will not be displayed correctly. 2 Type the following tag between the and tags to insert the image: The file lpd_logo.jpg is saved in the Module.08\Module folder. Figure 8-11 shows the HTML document. Figure 8-11 Adding an image to the HTML document Type the space and forward slash before typing the tag’s closing angle bracket so your code is XHTML compatible. 3 Save the file, switch to your browser, and then reload the page. Figure 8-12 shows the page. Figure 8-12 Image added to the webpage Trouble? If you see the alternate text or a broken link instead of the image shown in Figure 8-12, your HTML document (women_sd.html) and the lpd_logo.jpg file are stored in different folders. To correct this problem, copy the lpd_logo.jpg file from the Module.08\Module folder into the same folder as the HTML document, or move the HTML document into the Module.08\Module folder. If you move the HTML document, you will need to open the file in the browser from its new location. If you move the lpd_logo.jpg file, you will need to reload the page in the browser.