Web Design in a Nutshell

Web Design in a Nutshell Chapter 12: Adding Images and Other Page Elements

Summary • Summary of object placement tags • Image basics • Acceptable graphics formats • The <img> tag and its attributes • Alternative text • Specifying width and height • Resizing images • Using width and height to preload images • Vertical alignment • Horizontal alignment • Link to large images • Reuse images when possible • Horizontal rules • <embed> & Java

Summary of object placement tags • <applet>…</applet> (deprecated): This tag is used to place a Java applet on the web page. This has been deprecated in favor of the <object> element, but is still widely used. • align=“left|right|top|middle|bottom” • alt=“text” • archive=“URLs”: provides a space-separated list of URLs with classes to be preloaded • code=“class” (required): specifies the class name of the code to be executed • codebase=“URL”: URL from which the applet is to be retrieved • height=“number” • hspace=“number”: space clear to the left & right of applet window • name=“text”: names the applet for reference from elsewhere on the page • vspace=“number”: space clear above & below applet window • width=“number”

Summary of object placement tags (cont.) • <embed>…</embed>: embeds an object into the web page. Embedded objects are most often multimedia files that require special plug-ins to display (e.g. Flash movies, etc.). Certain media types and their respective plug-ins may have additional proprietary attributes. • align=“left|right|top|bottom” • height=“number” • hidden=“yes|no”: hides the media file or player from view • name=“name” • palette=“foreground|background”: makes the plug-in’s palette the foreground palette • pluginspage=“URL”: specifies the URL for information on installing the appropriate plug-in • pluginurl=“URL” (Netscape only): specifies a source for installing the plug-in for the media file • src=“URL” (required): provides the URL to the file or object to be placed on the page • width=“number”

Summary of object placement tags (cont.) • <hr> (no end tag): Adds a horizontal rule to the page • align=“center|left|right” (deprecated): if the rule is shorter than the width of the window, this tag controls horizontal alignment of the rule. The default is center • noshade (no value, deprecated): displays the rule as a solid (non-shaded) bar. • size=“number” (deprecated): specifies the thickness of the rule • width=“number|%” (deprecated): specifies the length of the rule in pixels or as a percentage of the page width. By default, rules are the full width of the browser window (100%) • <img> (no end tag): places a graphic on the page • alt=“text”: provides a string of alternative text that appears when the image is not displayed. May also be displayed as a “tool tip” when the mouse is over the image. • border=“number”: specifies the width of the border that surrounds a linked image. It is standard practice to set border=0 to eliminate the border • height=“number”: specifies the height of the image in pixels. It is not required, but is recommended to speed up the rendering of the web page

Summary of object placement tags (cont.) • hspace=“number”: specifies the amount of space to leave clear to the left and right of the image • ismap (no value): indicates that the graphic is used as the basis for a server-side imagemap • lowsrc=“url”: specifies an image (usually of a smaller size) that will download first, followed by the final image specified by the src • name=“text” • src=“url” (required): provides the location of the graphic to display • usemap=“url”: specifies the map containing coordinates and links for a client-side imagemap • vspace=“number”: specifies the amount of space to leave clear above and below the image • width=“number”: specifies the width of the image. It is not required, but is recommended to speed up the rendering of the page

Summary of object placement tags (cont.) • align=“type” (deprecated): specifies the alignment of an image • absbottom: aligns the bottom of the image with the bottom of the current line • absmiddle: aligns the middle of the image with the middle of the current line • baseline: aligns the bottom of the image with the baseline of the current line • bottom: aligns the bottom of the image with the text baseline (default vertical alignment) • center: centers the image horizontally on the page, although most browsers treat it the same as align=“middle” • left: aligns the image on the left margin and allows subsequent text to wrap around it • middle: aligns the text baseline with the middle of the image • right: aligns the image on the right margin and allows subsequent text to wrap around it • top: aligns the top of the image to the top of the tallest object on that line

Summary of object placement tags (cont.) • <marquee>…</marquee>: creates a scrolling marquee area • Editor’s note: almost as annoying as <blink>…</blink> • align=“top|middle|bottom” • behavior=“scroll|slide|alternate”: scroll is the default and means the text should start completely off one side, scroll all the way across and completely off, then start over again. Slide stops the scroll when the text touches the other margin. Alternate means bounce back and forth within the marquee. • bgcolor=“#rrggbb|color name” • direction=“left|right”: direction the text scrolls • height=“number” • hspace=“number” • loop=“number|infinite”: # times the text loops • scrollamount=“number”: # pixels to move the text during each movement • scrolldelay=“number”: # milliseconds between movements • vspace=“number” • width=“number”

Summary of object placement tags (cont.) • <noembed>…</noembed>: the text or objected specified by <noembed> appears when an embedded object cannot be displayed (e.g. when the appropriate plug-in is not available). This tag is placed within <embed> container tags • <object>…</object>: a generic element used for placing an object (such as an image, applet, media file, etc.) on a web page. It is similar to the <embed> tag but is the W3C’s approved method for adding elements to a page. Browser support is still not up to standards • align=“baseline|center|left|middle|right|textbottom|textmiddle|texttop” • archive=“urls”: specifies a space-separated list of URLs for resources related to the object • border=“number” (nonstandard) • classid=“url”: identifies the location of an object’s implementation • codebase=“url”: identifies the base URL used to resolve relative URLs in the object. Default is the URL of the current document • codetype=“codetype”: specifies the media type of the code. Required only if the browser cannot determine an applet’s MIME type from the classid

Summary of object placement tags (cont.) • data=“url”: specifies the URL of the data used for the object • height=“number” • hspace=“number” • name=“text” • standby=“message” (IE): specifies the message to display during object loading • type=“type”: specifies the media type for the data • usemap=“url”: specifies the imagemap to use with the object • vspace=“number” • width=“number” • <param> (no end tag): specifies a parameter to use within the <applet> or <object> tag • name=“text” (required) • value=“text”: defines the value of the parameter • valuetype=“data|ref|object”: indicates the type of data. data indicates that the parameter's value is data (default). ref indicates that the value is a URL. object indicates that the value is the URL of another object in the document

Image basics • Inline graphic uses • Graphic files can be used in a number of ways on the Web • Images may be used as background tiles (in the background attribute of the <body> tag or in tables). • You can also create a link to a graphic file that displays either in the browser window or in a helper application if it can’t be displayed in the browser • The most common use of images is inline (displayed in the browser window as part of the flow of the contents of the document). This may include banners, buttons, logos, etc. Inline images are placed on the page with the <img> tag. • As a simple graphic: used on a web page much as it is used in print, adding decoration or information • As a link: can be used to link to another document or object • As an imagemap • As spacing devices: because web pages are difficult for designers to control with HTML alone, some designers resort to using transparent graphics to invisibly control the alignment of text or the behavior of tables (generally considered to be poor HTML form)

Acceptable graphics formats • A graphic needs to be in either GIF or JPEG format to be displayed as an inline image by the vast majority of browsers. Files must also be named with the appropriate suffixes (.gif for GIF files, .jpeg or .jpg for JPEG) in order to be recognized by the browser • Another format, PNG (Portable Network Graphic), was designed specifically with web distribution in mind. However, only v4 and higher browsers support the PNG format (suffix .png).

The <img> tag and its attributes • The <img> tag inserts a graphic into the document’s text flow. It does not introduce any line breaks or extra space. By default, the bottom of the image aligns with the baseline of surrounding text • Over a dozen attributes can be added within the <img> tag, but the only required attribute is src, which provides the URL of the graphic • The URL of the graphic can be absolute or relative • To make a graphic link, place anchor tags around the image tag just as you would around any string of text. By default, when an image is linked, a 2-pixel border is displayed around the image. • For samples, see http://siu.globaleyes.com/files/MGMT362e/WDIAN/img.html

Alternative text • If a graphic cannot be displayed, the browser displays a generic broken graphic icon in its place. The browser will also display a generic graphic icon when the user has chosen to turn graphics off for faster browsing (and many users do). The alt attribute allows you to specify a string of text to be displayed in its place • When alternative text is provided, at least users know what they’re missing. If the graphic, for example, is integral to the navigation of the site, it is especially important to let the users know what the image represents <p> First star <img src=“star2.gif” alt=“another star”> I see tonight</p>

Specifying width and height • Although the src attribute is the only truly necessary attribute of the <img> tag, a few others are strongly recommended. In addition to the alt attribute, width and height are the others. • The width and height simply indicate reserved to display the image <img src=“star.gif” width=“50” height=“50” alt=“star”> • With this information, the browser can lay out the page before the graphics have downloaded. Without width and height values, the page may be redrawn several times (first without the graphics, and again each time new graphics arrive). • It is worthwhile to take the time to include accurate width and height information in the image tag.

Resizing images • If the values specified in the width and height attributes are different than the actual dimensions of the graphic, the browser resizes the graphic to the specified dimensions. • Although this effect can be used strategically, it usually just results in a pixilated, poor image quality, often requiring the user to download unnecessary data wasting bandwidth (if the image is sized smaller than the actual image size) • It is best to resize images in a graphics program then to leave it up to the browser.

Using width and height to preload images • Preloading images refers to methods used for downloading images and storing them in cache before they actually need to be displayed on a page. • One trick is to place the graphic on a page that will be accessed first (such as a home page), but with the width and height attributes set to one pixel. This causes the image to download with the rest of the page, but only a single-pixel dot will appear in the image’s place (which can be tucked away somewhere). • Ideally, the image finishes downloading quietly and is stored in the browser’s cache until the client browses to a page where the image will be displayed in all its glory • The downside of this approach is that these images will be competing for bandwidth with images actually displayed on this page. • A better alternative would be to load the images through a JavaScript function which can be controlled as to when it executes (e.g. after the page has loaded). This way, the preloaded images will generally not be downloaded until all required files for viewing the page are finished.

Vertical alignment • The align attribute is used to control how the graphic is positioned in relation to the flow of text • Vertical alignment controls the placement of the graphic in relation to points in the surrounding text (usually the baseline – the line which your characters rest on). The default alignment is bottom which aligns the bottom of the image with the baseline of the surrounding text • Universally supported values for vertical alignment are top, middle, and bottom. Netscape added absbottom, absmiddle, and texttop which have been picked up by other browsers. • For examples, see the img sample page

Horizontal alignment • The align attribute can also be used to align a graphic on the left or right margin of the page by using the values left or right. • What makes the left and right alignment special is that in addition to placing the graphic on a margin, it allows the following text to flow around it. • If you want to align a graphic on the right margin without the text wrapping around it, you can place the img in a paragraph and align the paragraph on the right. • You could also align the graphic on the right and follow it with a <br clear=“all”> tag which can also be used to stop the text wrapping at any point within your text.

Link to large images • Remember that when designing for the Web, you must always consider the time it takes to download files. Images are particularly bandwidth-hungry, so you should use them with care. • One successful strategy for providing access to large images is to provide a postage-stamp-sized preview graphic (often called a thumbnail) which links to the larger file. • The preview could be a reduction of the whole image or just an alluring fragment. Be sure to provide information necessary to help users decide whether they want to spend the time clicking on the link such as • a description of what they are going to be downloading • the size of the file (in bytes/MB or resolution)

Reuse images whenever possible • When a browser downloads a graphic, it stores it in the disk cache (a place for temporarily storing files from the web on the client’s hard disk). That way, if it needs to redisplay the page, it can pull up a local copy without downloading it again. • When you use the same graphic repetitively in a page or a site, the browser only needs to download the graphic once. Every subsequent request for that graphic is grabbed from the local cache. • The browser recognizes the graphic by its entire pathname, not just the filename. So, to take advantage of caching, be sure that each instance of your img tag is pointing to the same graphic on the same server in the same directory

Horizontal rules • The simplest element you can add to a web page is a horizontal rule, plopped into place with the <hr> tag. • Most browsers display hr’s as an “embossed” shaded rule that extends across the full width of the browser window (or available text space). hr’s are used as simple dividers, breaking an otherwise long scroll into manageable chunks. • An <hr> always creates a line break before and after the tag. • The size attribute controls the thickness of the line • The width attribute controls the length of the line • Whenever the width attribute is specified (either in pixels or as a percentage of the page width) you can also specify where the line is aligned on the page (either left, right, or the default of center) • noshade causes the line to be displayed without the 3D embossed look

The <embed> tag • The <embed> tag places a media object, such as a Flash movie or the controls for a RealAudio file, on a web page. It displays the media object in a rectangular area that behaves much like an inline image in terms of positioning. • When the browser encounters the <embed> tag, it matches the suffix of the file name with the appropriate plug-in. • In addition to the standard attributes, the <embed> tag may also contain plug-in-specific attributes for controlling the function of the player (e.g. loop, autostart, autoplay, and volume)

Java applets • Java is an object-oriented programming language developed by Sun Microsystems. • It is not related to JavaScript • Java’s primary contribution to the Web has been in the form of Java applets, which are self-contained, mini-executable programs named with the suffix .class. • Applets are ideal for web distribution because • they are platform-independent (same program runs on Sun, Linux, Windows, Macintosh, etc.) • they download completely and run on the client • they are generally compact and download quickly • they don’t require a proprietary plug-in

The dark side of Java • Unfortunately, browsers can be temperamental in the way they handle Java applets. • browsers are notorious for crashing when executing a computation-heavy applet • it takes browsers a long time to initialize Java • MS had distributed it’s own form of Java which was not compatible with Sun’s Java “standard” • different versions of Sun’s Java environment may not execute code designed for earlier or later versions leading to major incompatibility issues • One resource for downloading applets you can add to your site is http://java.sun.com/applets

Web Design in a Nutshell