HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [44]
Chapter 6: Adding Images
In This Chapter
Understanding the main uses of images
Choosing an image format
Creating inline images
Using IrfanView and other image software
Changing image sizes
Modifying images with filters
You have the basics of text, but pages without images are . . . well, a little boring. Pictures do a lot for a Web page, and they’re not that hard to work with. Still, you should know some things about using pictures in your pages. In this chapter, you get all the fundamentals of adding images to your pages.
Adding Images to Your Pages
Every time you explore the Web, you’re bound to run into tons of pictures on just about every page you visit. Typically, images are used in four ways on Web pages:
♦ External link: The page has text with a link embedded in it. When the user clicks the link, the image replaces the page in the Web browser. To make an externally linked image, just make an ordinary link (as I describe in Chapter 5 of this minibook) but point toward an image file, rather than an HTML (HyperText Markup Language) file.
♦ Embedded images: The image is embedded into the page. The text of the page usually flows around the image. This is the most common type of image used on the Web.
♦ Background images: An image can be used as a background for the entire page or for a specific part of the page. Images usually require some special manipulation to make them suitable for background use.
♦ Custom bullets: With CSS, you can assign a small image to be a bullet for an ordered or unordered list. This allows you to make any kind of customized list markers you can draw.
The techniques you read about in this chapter apply to all type of images, but a couple of specific applications (such as backgrounds and bullets) use CSS. For details on using images in CSS, see Book II, Chapter 4.
Adding links to images
The easiest way to incorporate images is to link to them. Figure 6-1 shows the externalImage.html page.
The page’s code isn’t much more than a simple link:
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Linking to an External Image
Figure 6-1: This page has a link to an image.
The href points to an image file, not an HTML page. You can point to any type of file you want in an anchor tag. If the browser knows the file type (for example, HTML and standard image formats), the browser displays the file. If the browser doesn’t know the file format, the user’s computer tries to display the file using whatever program it normally uses to open that type of file.
See Chapter 5 of this minibook for a discussion of anchor tags if you need a refresher.
This works fine for most images because the image is displayed directly in the browser.
You can use this anchor trick with any kind of file, but the results can be very unpredictable. If you use the link trick to point to some odd file format, there’s no guarantee the user has the appropriate software to view it. Generally, save this trick for very common formats, like GIF and JPG. (If these formats are unfamiliar to you, they are described later in this chapter.)
Most browsers automatically resize the image to fit the browser size. This means a large image may appear to be smaller than it really is, but the user still has to wait for the entire image to download.
Because this is a relative reference, the indicated image must be in the same directory as the HTML file. When the user clicks the link, the page is replaced by the image, as shown in Figure 6-2.
Figure 6-2: The image appears in place of the page.
External links are easy to create, but they have some problems: