If the Web were nothing but text, it would still be technologically impressive, but it wouldn't be nearly as much fun. Adding images to your pages is easy; adding images that make your Web pages look professional just takes a little know-how. Luckily, you'll learn that hereand it shouldn't take longer than 10 minutes. The two most frequently used graphics file formats found on the Web are GIF and JPEG. The Joint Photographic Experts Group (JPEG) format is used primarily for realistic, photographic-quality images. The Graphics Interface Format (GIF) is used for almost everything else. One new file format is gaining popularity among designers and will soon be making its presence known: The Portable Network Graphics format (PNG) is expected to replace the GIF format someday. Don't rush out to replace all your graphics, however; not all browsers support it fully yet. Tip
Let's get down to business. You add all images by using a single HTML tag, the image source tag, <img src="/books/1/174/1/html/2/location" />. By now you probably recognize that this tag is actually an <img /> tag with an attribute (src) and attribute value (location), but because all images require a src attribute, it's easier to refer to it as a single tag. You'll also notice that the image tag does not have a corresponding closing tag. It is a single tag and you'll need to remember to add the closing slash at the end: <img />. The result of the following sample HTML appears in Figure 8.1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>First Images</title> <style type="text/css"> </style> </head> <body> <p>This is an image in my first Web page.</p> <img src="/books/1/174/1/html/2/http://www.thingstobehappyabout.com/face2.gif" /> </body> </html> Figure 8.1. The <img src="/books/1/174/1/html/2/location" /> tag inserts an image into your HTML document.Caution
|