Building the User Interface by Using HTML5: Text, Graphics ... - server

Building the User Interface by Using HTML5: Text, Graphics, and Media | 35You can display different kinds of images on a Web page, most of which fall into two main categories:raster (or bitmap) and vector. A raster image is made up of pixels, whereas a vector imageis made up of lines and curves based on mathematical expressions. A photograph is a type of rasterimage and is most often in JPG format. Other raster file formats that work well on Web pagesare PNG, GIF, and BMP. A vector image is an illustration, such as a line drawing. Developersoften convert vector file formats from programs like Adobe Illustrator or CorelDRAW, whicharen’t supported by Web browers, into PNG or GIF for Web display. An important differencebetween the two types of files is that raster images lose quality (they become pixelated) as youenlarge them, but vector images maintain quality even when enlarged.The primary way to add images to an HTML document is with the img element. Like theanchor tag, the img tag does nothing by itself and requires attributes and values that specifythe image the Web browser should display.For example, to insert an image named redball.jpg that’s in a subfolder called images, typethis element:LICENSED PRODUCT NOT FOR RESALECERTIFICATION READYWhat markup do you useto display an externalimage on a Web page?2.2The image will display as long as the images subfolder is accessible. Both the src attributeand the alt attribute are required to be fully valid. The value of the alt attribute (short foralternate text) displays when a user hovers the mouse pointer over the image; in this case, thephrase “Red ball graphic” would display. The W3C requires the alt attribute for accessibilityby people with disabilities. People with limited vision may use a screen reader, which readsaloud the alternate text for each image. Search engines also use the alt attribute to identifytypes of images and what’s in them, since search engines can’t “see” pixels in images.As another example, to insert an image named bluelogo.png that’s accessible from anotherWeb site, type the following element:The img element uses several attributes, which are described in Table 2-3.Table 2-3img element attributes ATTRIBUTE VALUE DESCRIPTIONsrc URL Specifies the image’s location, such as a path or URLalt Text Specifies alternate text for the image, which displays whenthe user hovers the mouse pointer or other pointing deviceover the imageheight pixels Specifies the height of an imagewidth pixels Specifies the width of an imageismap ismap Specifies an image as a server-side image mapusemap #mapname Specifies an image as a client-side image map (which is apicture with defined areas that are clickable links)Using the figure and figcaption ElementsTwo new graphics-related elements introduced in HTML5 are the figure andfigcaption elements. The figure element specifies the type of figure you wantto use in an HTML document, such as an illustration or photo. The figcaptionelement provides a caption for the figure.