| Table of Contents | Previous Next |
1.3 Using images on XHTMLMost popular browsers now support a large number of standard image formats. Two of them are introduced in this section: the "GIF" and "JPG (or JPEG)" images. They are special files used on computers to represent pictures, photos, and images. For example, the file mypict.jpg is a picture file called mypict in jpg format identified by the file extension jpg. The gif image files are also popular in the Web community and more details will be presented in sections 1.3.1 and 1.3.4. Any supported images can be directly integrated into XHTML pages by using the classic image element <img>. Similar to the line-break element <br>, <img> is an empty element in XHTML (i.e., without an end element). You need to add "/" to close it. The best way to study the <img> (or <img />) element is to learn from examples. 1.3.1 Adding images to our pagesSuppose you have a jpg (or jpeg) image stored in a file called logo_web.jpg. This file can be easily imported into an XHTML page by using the image element <img> and attribute src (i.e., source location) as demonstrated in ex01-07.htm. Example: ex01-07.htm - Using Image Element <img> 1: <?xml version="1.0" encoding="iso-8859-1"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 5: <head> 6: <title> Using Image Element <img> ex01-07.htm</title> 7: </head> 8: <body style="background:#000044"> 9: <div style="text-align:center"><br /><br /> 10: <span style="font-family:arial;font-size:22pt;color:#00ff00"> 11: <b>We Have Images!</b><br /></span> 12: <img alt="pic" src="logo_web.jpg" /><br /> 13: <span style="font-family:arial;font-size:14pt;color:#00ffff"> 14: <b>Practical Web Technologies</b> 15: <br /><br /></span> 16: </div> 17: </body> 18: </html> The key statement in this XHTML page is line 12: <img alt="pic" src="logo_web.jpg" /> This code will ask the browser to display an image called logo_web.jpg located in the local directory. Usually, this local directory is the default directory where you store your Web page. If the image file logo_web.jpg is located inside another directory (e.g., pic.dir\logo_web.jpg), you need to modify the code to include the directory: <img alt="pic" src="pic.dir\logo_web.jpg" /> If the picture file cannot be found, then the attribute alt="pic" will override execution and display the message "pic" on the screen. This attribute is compulsory to produce code to XHTML standard and reflects the strict programming discipline of XHTML. Note that there is a difference between using directories and paths between UNIX and PC (Microsoft) environments. For UNIX users, a slash "/" is used to separate directories on a path, such as usr/local/cgi-bin/public_html/default.html For PC (Microsoft) systems, a back slash "\" is used instead. Since most browsers on the Web support the UNIX convention, including different versions of IE, we will use a slash throughout this book. As we can see, the integration of images into XHTML is very simple and straightforward. Suppose we have a Web site called www.pwt-ex.com with this example ex01-07.htm in a directory book/chap01a. This page can be browsed using the following command on IE, NS, or other browsers:
From now on, www.pwt-ex.com and /book/chapXXa are respectively the default address and directories used in this book. A screen shot of ex01-07.htm is shown in Fig. 1.8. Figure 1.8. ex01-07.htm
Let's now study another example with more images. This example involves our logo logo_web.jpg and three balloon GIF images. The balloons are arranged horizontally below the logo. Since both JPG and GIF images are supported, they can be imported into a Web page by simple <img> statements as shown in the example code ex01-08.htm. Example: ex01-08.htm - Adding Multiple Images 1: <?xml version="1.0" encoding="iso-8859-1"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 5: <head> 6: <title> Adding Multiple Images ex01-08.htm</title> 7: </head> 8: <body style="background:#000044"> 9: <div style="text-align:center""><br /> 10: <span style="font-family:times;font-size:22pt;color:#00ff00"> 11: <b>Practical Web Technologies</b><br /><br /></span> 12: <img alt="pic" src="logo_web.jpg" width="180" height="90" /><br /><br /> 13: <img alt="pic" src="balloon.gif" /> 14: <img alt="pic" src="balloon.gif" /> 15: <img alt="pic" src="balloon.gif" /><br /> 16: <span style="font-family:times;font-size:16pt;color:#00ffff"> 17: <b>Balloon Images<br /> 18: Now I Know How To Put Images Together</b><br /></span> 19: </div> 20: </body> 21: </html> In line 12, the width and height attributes associated with the <img> element are used to control the size of the image. In this case, the logo picture will be stretched into the size width="180" (180 pixels) and height="90" (90 pixels). This result is shown in Fig. 1.9. Figure 1.9. ex01-08.htm
1.3.2 Background images: edges and material effectsMany Web designers also like to use a small picture and repeatedly display it in a horizontal and/or vertical direction to form a background. This small picture can be a photo, a pattern, and/or some graphic designs. With careful arrangement, this type of background can create an eye-catching effect. To add a background image in XHTML is very straightforward. All you need to do is to add an image file associated with the background attribute inside the <body> element. For example, the statement
<body style="background:url('bg_image.gif')">
will repeatedly insert an image bg_image.gif into the body of your page to create a background picture. Similar to the src attribute in the image element <img>, the url (i.e., the uniform resource locator) is used to locate the picture file. Apart from a background picture, and thanks to the transparency feature, this background technique can also be used to create a "Graphical Edge" effect for Web pages. Consider the following code ex01-09.htm:
Example: ex01-09.htm - Generating Graphical Edges
1: <?xml version="1.0" encoding="iso-8859-1"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head>
6: <title> Generating Graphical Edges ex0109.htm</title>
7: </head>
8: <body style="background:url('formal.gif') repeat-x #000044">
9: <div style="text-align:center"><br /><br /><br /><br /><br /><br />
10: <span style="font-family:times;font-size:20pt;color:#00ff00">
11: <b>Practical Web Technologies</b><br /><br /></span>
12: <img alt="pic" src="logo_web.jpg" width="180" height="90" /><br /><br />
13: <img alt="pic" src="balloon.gif" />
14: <img alt="pic" src="balloon.gif" />
15: <img alt="pic" src="balloon.gif" /><br />
16: <span style="font-family:times;font-size:16pt;color:#00ffff">
17: <b>Balloon Images<br />
18: I Know How To Generate Graphical Edges Now</b><br /></span>
19: </div>
20: </body>
21: </html>
This example is basically the same as ex01-08.htm, with the addition of a background attribute to <body> in line 8, i.e.,
<body style="background:url('formal.gif') repeat-x #000044">
Here, the background picture formal.gif is actually a long strip of graphic design. The upper part of this strip is a graphic image and the lower part is a long strip of transparency. When the browser renders this background repeatedly in the horizontal direction (i.e., repeat-x), the transparency part has no effect on the page. The upper design will form a graphical edge on top of the screen. This technique has an advantage in that the size of the edge will change according to the size of the browser window (see Fig. 1.10). Figure 1.10. ex01-09.htm
Another application of this background technique is the creation of what is called a "Material Effect" for a page. A large variety of materials (or background textures) can now be found on the Internet and various Web sites. They are just small pictures (or patterns) of a given material. Some of the popular patterns commonly used on the Web are shown in Fig. 1.11. Figure 1.11. Material effect patterns
To incorporate these effects into your Web page is very simple. Consider the page shown in ex01-10.htm:
Example: ex01-10.htm - Material Effects
1: <?xml version="1.0" encoding="iso-8859-1"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head>
6: <title> Material Effects ex0110.htm</title>
7: </head>
8: <body style="background:url('image001.jpg')">
9: <div style="text-align:center"><br /><br />
10: <span style="font-family:arial;color:#ffff00;font-size:20pt">
11: <b>We Have Background Effects!</b><br /><br /></span>
12: <img alt="pic" src="logo_web.jpg" /><br /><br />
13: <span style="font-family:arial;color:#00ffff;font-size:18pt">
14: <b>Practical Web Technologies</b>
15: <br /><br /></span>
16: </div>
17: </body>
18: </html>
As you can see from this example, all you have to do is to put the "Material Effect" picture file (e.g., image001.jpg) into the background attribute of the <body> element as illustrated in line 8. Provided the background picture file image001.jpg is in the same directory as the Web page, the browser can read the file and generate a background. A screen shot of this page is shown in Fig. 1.12. Figure 1.12. ex01-10.htm
In Fig. 1.12, the stone pattern forms a large marble background on your page creating a simple but realistic background effect. This simple but effective technique is widely used in the Web industries. Now that you've been introduced to images and backgrounds, it's time to take a look at how animated pictures can be displayed on a Web page. 1.3.3 Animated images: cartoon animationThe fierce competition among image standards for the Web in the 1990s greatly enhanced the functionalities of image formats. One effective solution was the so-called "Graphics Interchange Format" (GIF). This image format is based on a lossless compression method called "LZW," which produces a picture that is suitable for low-bandwidth transmission. This format, particularly the "GIF89a" specification standard, provides the following functionalities for Web users:
Following the "GIF89a" specification, GIF images with animation effects are usually called "Animated GIF" and form one of the image standards on the Web. In particular, when used with dynamic motion and/or controlled movement, this feature can produce stunning effects. We will show you some simple examples in this section. More advanced techniques will be discussed in Chapter 9. The incorporation of animated GIF pictures into an XHTML page requires no special technique. Indeed this can be achieved by using the familiar image element <img>. The following is an example of the <img> element at work: Example: ex01-11.htm - 2D Animated Image 1: <?xml version="1.0" encoding="iso-8859-1"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 5: <head> 6: <title>2D Animated Image ex01-11.htm</title> 7: </head> 8: <body style="background:#9090ee"> 9: <div style="text-align:center"> 10: <span style="font-family:arial;font-size:30pt;color:#00ffff"> 11: <b>Welcome To</b><br /></span> 12: <span style="font-family:arial;font-size:23pt;color:#ffff00"> 13: <b>My Personal Web Page</b><br /><br /></span> 14: <img alt="pic" src="line1.gif" width="550" height="8" /><br /><br /> 15: <img alt="pic" src="boom01.gif" /><br /> 16: <span style="font-family:arial;font-size:16pt;color:#00ffff"> 17: <b>Practical Web Technologies</b> 18: <br /><br /> 19: </span> 20: </div> 21: </body> 22: </html> The image (line1.gif) used in line 14 is a "Horizontal Line" type picture in red. You can use this image with attributes width and height to draw a line on your page. The animated GIF file boom01.gif is defined in line 15. This is a picture file with 16 subimages. These subimages are all GIF files with file names denoted by an01_00.gif to an01_15.gif respectively (see Fig. 1.13). The construction of the overall animated file boom01.gif is easily accomplished by the following steps:
Figure 1.13. Animated GIF sequence boom01.gif
There are many types of animated GIF software available on the Internet. Two of the them are the GIF Construction Set from Alchemy Mindworks Inc. (www.mindworkshop.com) and GIF Animator from Ulead Systems Inc. (www.ulead.com). The software used here is GIF Animator. All these subimages are listed in Fig. 1.13 and are available individually on the Web site that accompanies this book. One important factor in building good animated pictures is the timing control. In this example we've given subimages an01_00.gif, an01_14.gif, and an01_15.gif a longer display time. A screen shot of this animation is shown in Fig. 1.14. Figure 1.14. ex01-11.htm
1.3.4 More animated images: a 3D animated logoThe beauty of the animated GIF images is that once they are developed, they can be treated as a single picture file. The picture can be easily included in your emails, or used to produce animated effects in your Web page, without the hassle of using other Web technologies such as JavaScript, VBScript, and Java. This technique has a very important role to play in the area of small animation sequence applications such as dynamic logo design and advertising on the Internet. In the next example, you will see how to build a realistic three-dimensional (3D) animation sequence. We start with a simple logo named "Rody" and subsequently extend it to a 3D logo with texture. This logo can be created easily by any conventional 3D drawing package such as Cool 3D from Ulead Systems Inc. (www.ulead.com). Using this software, we can perform various types of classical 3D movements on our object, such as horizontal and vertical rotations. For the sake of discussion, we've arranged 14 different 3D positions and saved them as GIF files. These pictures are listed in Fig. 1.15. Figure 1.15. Animated GIF sequence rody04.gif
As mentioned above, the Cool 3D software is used to produce a single animated GIF file rody04.gif. This file is then added to ex01-11.htm to create ex01-12.htm with more animated images in one page. If this example ex01-12.htm is run with a reasonably good machine and browser, you should see two animated pictures working simultaneously. A screen shot of this example on IE is shown in Fig. 1.16. Figure 1.16. ex01-12.htm
Another direct benefit from the transparency feature of the GIF picture is that a transparent background, in many cases, makes objects look more realistic and also makes sure that two or more files can be animated together without background (or background color) interference. The XHTML code associated with this example is listed below: Example: ex01-12.htm - 3D Animated Image 1: <?xml version="1.0" encoding="iso-8859-1"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 5: <head> 6: <title>3D Animated Image ex01-12.htm</title> 7: </head> 8: <body style="background:#aaaadd"> 9: <div style="text-align:center"> 10: <span style="font-family:arial;font-size:30pt;color:#00ffff"> 11: <b>Welcome To</b><br /></span> 12: <span style="font-family:arial;font-size:23pt;color:#ffff00"> 13: <b>My Personal Web Page</b><br /><br /></span> 14: <img alt="pic" src="line1.gif" width="550" height="8" /><br /><br /> 15: <img alt="pic" src="rody04.gif" width="300" height="250" /><br /> 16: <img alt="pic" src="boom01.gif" /> <br /> 17: <span style="font-family:arial;font-size:16pt;color:#00ffff"> 18: <b>Practical Web Technologies</b> 19: <br /><br /> 20: </span> 21: </div> 22: </body> 23: </html> If you compare this example with ex01-11.htm, an additional line 15 is included: <img alt="pic" src="rody04.gif" width="300" height="250" /> This statement incorporates the 3D animated logo into the page. The attributes width and height are used to control the size of the picture display. The animated GIF is an important tool for creating eye-catching small pictures and logos for personal use or the Web advertising industries. The popularity of this technique is so great that it is difficult to find a successful commercial (or advertising) site that doesn't use them. |
| Table of Contents | Previous Next |
