Adding Images


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

Sound like a prolearn how to pronounce the graphic formats you use. GIF is pronounced "jif" (like the peanut butter), JPEG is pronounced "jay-peg," and PNG is pronounced "ping."


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

Be aware that the World Wide Web Consortium, the standards-setting body for HTML, is considering replacing the <img /> tag with the more generic <object> tag. To add an image using the <object> tag, follow this format:

<object data="location" type="image/gif"> text     describing the image... </object>





Sams Teach Yourself HTML in 10 Minutes
Sams Teach Yourself HTML in 10 Minutes (4th Edition)
ISBN: 067232878X
EAN: 2147483647
Year: 2004
Pages: 151
Authors: Deidre Hayes

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net