Graphics play an important role in Web page design. There are hardly any pages on . the World Wide Web that don’t use graphics and some pages contain hardly any text. Graphics are not inserted in the HTML document directly The document itself contains special tags which reference the image to be inserted by the browser when the page is opened. Because of this graphics files are downloaded separately and placed on the page by the browser
On the Web where every byte counts and downloads must be fast images must contain as much information in as few bytes as possible. Despite the number of graphics formats available today two formats have dominated the Web:
• JPEG (Joint Photographic Experts Group)
• GIF (Graphics Interchange Format)
These formats are used because they compress graphics files to a manageable size. JPEG files can be compressed a good-deal (albeit with some loss of detail) but they maintain a good image quality overall. The problems become evident when the compressed image is enlarged but the graphics on Web pages are meant to be viewed in the context of the Web page to which they.belong. The GIF file format
• is an old one and it supports only 256-color images but it has a few really handy features. It’s the only format that supports transparency and its compression ratio is quite good.
To insert an image at the current location in the document use the <IMG> tag with the SRC attribute which specifies the image to be displayed. Figure 19.3 shows a page with a simple graphic centered across the page.
Inserting a simple
graphic flle
Here is the HTML source code that produced the page in Figure 19.3:
<HTML>
<HEAD>
<TITLE>Graphics on Web pages<TITLE>
</HEAD>
<BODY>
<CENTER>
<Hl>Placing an Image on a Web page</Hl>
<IMG SRC·”earthl.jpg”><BR>
Our small planet. centered on the page
</CENTER> · </BOOY> i1
</HTML> \t
An HTML Primer ‘1025
The <IMG> tag has the following syntax:
• <IMG SRC~”picture.jpg”>
The <IMG> tag recognizes additional attributes but you must include the SRC attribute which is the location of an image file on the server or any URL on the Web. Most designers use graphics in the same directory as the rest of the Web site files or those in a separate folder used for storing images only If the image resides en the same server as the document you should use a relative path name so that the entire project can be moved to another folder or server without having to edit the HTML file.
When you use the following attributes with the <lMG> tag the browser can manipulate the image in several ways:
• ALIGN aligns the image to the left right center top bottom or middle of the screen.
• WIDTH and HEIGHT specify the width and height of the image.
• BORDER adds a border to the image, which is visible only if the image is a hyperlink.
• VSPAcE’and HSPACE clear space vertically or horizontally. The empty space is specified in pixels.
• AL’f includes a text message to be displayed if the user has turned off graphics.
• USEMAP inserts an image map.
The browser can figure out the image’s dimensions, but only after it has been downloaded. Specifying the width and the height of an image speeds up the rendering as the browser doesn’t have to rearrange the elements already placed on the page. Although this was the o~ginaipurpose of the WIDTH and HEIGHT attributes you can use these values to perform a neat trick.
If you want to change the size of an image you can specify the size with the WIDTH and HEIGHT attnbutes and the browser will size the existing file to the new values. For instance to create a straight vertical line two pixels wide simply use a square image two pixels on each side, and set the values to <IMG WIDTH 2 and HEIGHT=200 SRC=”picture.jpg”>. Your image will stretch 200 pixels high. You can also distort bitmaps with the WII?1H and HEiGHT attributes.
The BORDER attribute specifies the width of the border to appear around an image. Borders two pixels wide automatically surround arty image used as a hyperlink. You may want to eliminate this automatic border with the BORDER=none attribute. You can also specify a different size border for an image by including the BORDER attribute with the width value in pixels. Keep in mind however that the border won’t be unless the image is a hyper One aspect affecting the appearance of images, especially when they are surrounded by text is the amount of space between the image and surrounding text. Space can be cleared horizontally and vertically with the HSPACE and VSPACE attributes. Simply specify the amount of space in pixels for example HSPACE=10 or VSPACE =20.
The ALT attribute displays alternative text for viewers whose browsers have images turned off (many people turn off the display of images to speed up the loading of the page). The attribute ALT=”Company Logo” tells the user that the image is not displayed in the browser. In addition if the image takes a long time to download the message “Company Logo” is displayed in the image’s space on the page. If for some reason your images are not transmitted or don’t show up the user can still navigate your Web site and get the picture so to speak.
Tables
Tables are invaluable tools for organizing and presenting data in a grid or matrix. Tables are used in an HTML document for the same reasons they are used in any other document. There is however one more reason for using tables with an HTML document: to align the elements on a page. A table’s cell may contain text hyper links or images and you can use the cell to align these elements on the page in ways that are simply impossible with straight HTML or even other tables. You can even use tables without borders so your audience doesn’t see how you’ accomplished your amazing (for HTML) feats of graphic design.
The Basic Table Tags
Every table begins with the <TABLE> tag and ends with the </TABLE> tag. The attributes of the <TABLE> tag allow you to specify whether the table has borders the width of borders the distance between cells and the proximity of cell contents to the edge of the cell. You can specify the width and height of the table in either pixels or as a percentage of total screen size.
Within the <TABLE> tags each table row is marked by the <TR> tag. The closing </TR> tag is optional. Each row’s cells are marked by the <TO> tag whose closing <lID> tag is also optional. Here’s the structure of a simple table. If you create all HTML:file with the following lines and open it with your browser you will see the items arranged as a table without any lines around them.
<HlMl>
.<TABLE>
<TR>
<TO> Row 1, Column 1 </TO>
<TO> Row 1, Column 2 </TO>
<TO> Row.1, Column 3 </TO>
</TR>
<TR>
<TO> Row 2, Column 1 </TO> •
<TO> Row 2, Column 2 </TD>
<TO> Row 2, Column 3 </TO>
</TR>
<TR>
<TO> Row 3, Column 1 </TO>
<TO> Row 3, Column.2 </TO>
<TO> Row 3, Column 3 </TO>
<!TR>
</TABLE>
</HTML>
Header and Data Rows
You can use the <TH> tag in place of the <TR> tag to indicate that the row is a header row. The following HTML code produces a simple table with two rows one of them formatted as header:
<TABLE BORDER-l CELlSPACING-l CELLPADDING-l>
<TR>
<TH>
</TH>Heading 1
<TH>
</TH>Heading 2
</TR>
<TR>
<TO>Cell 1
</ro>
<TO>Cell 2
</TO>
</TR>
</TABLE>
The CELLSPACING and CELLPAbDING attributes of the <TABLE>tag determine the spacing between successive cells and the padding around each cell’s contents. By default each cell is made large enough to fit its contents. Use the CELLPADDING
attribute to specify additional padding around a cell’s contents
