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

More documents

Recommendations

Info

34 | Lesson 2SEE THE EFFECTS OF DEPRECATED ELEMENTSGET READY. To see the effects of deprecated elements in an HTML5 Web page, perform thefollowing steps:1. In your editing tool, open L2-pet-mark.html if it’s not already open.2. Modify the h1 heading to incorporate the center element, as shown:LICENSED PRODUCT NOT FOR RESALECare and Feeding3. Create a new file by saving it as L2-pet-temp.html and view it in a Web browser.Did the element center the heading in your browser?4. Add the big element to the following content, as shown:Your dog is a friend for life.5. Save the file and view it in a Web browser. Do you see the effect of the big element?See Figure 2-9 as an example.Figure 2-9The effects of the center andbig elements6. Go to the W3C Markup Validation Service Web page at http://validator.w3.org.Upload L2-pet-temp.html and click Check to have the service check it.7. Notice that the validator displays errors regarding use of the deprecated elements.What can you conclude about using deprecated elements in HTML5? (Deprecatedelements don’t validate but many of them still render properly in a Web browser.)8. Close L2-pet-temp.html and leave the editing tool and Web browser open if you’recontinuing immediately to the next section.■ Choosing and Configuring HTML5 Tags to Display GraphicsTHE BOTTOM LINEUse the img element to display linked images in a Web page. The images can be locatedwith the Web pages HTML files, usually in an images subfolder, or on a different serveror Web site. The figure and figure caption elements are new to HTML5, and give youmore control of the type of image you are displaying and the ability to include captions.The canvas element is used for drawing, rendering, and manipulating images andgraphics dynamically in HTML5. Scalable Vector Graphics (SVG) enables you to createscalable objects that resize to best fit the screen on which they’re viewed, whether a PCscreen or a smartphone.
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.
Page 1 and 2: Building the UserInterface by Using
Page 3 and 4: Building the User Interface by Usin
Page 5: Building the User Interface by Usin
Page 13: Building the User Interface by Usin

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

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?