IMAGES - HTML5 - page 185

PLACING IMAGES AND CREATING FLEXIBLE
WEB PAGES
h e <img> tag is the primary one used to call up graphics, and although CSS3 is the primary
tool for getting things to go where you want on a Web page, you can use certain <img>
attributes to help out. h is section examines options you have for placing text where you want
it to go on your Web page and how to use certain key attributes with the <img> tag.

IMAGE PLACEMENT WITH THE ALIGN ATTRIBUTE
To start looking at placement, consider the align attribute of the <img> tag. h e one
advantage is that there is no easier way to quickly position the image relative to the text. h e
following script ( ImagePlacement.html in this chapter's folder at www.wiley.com/
go/smashinghtml5 ) illustrates this.

<! DOCTYPE HTML >
< html >
< head >
< style type = ”text/css” >
/*048ABF,049DBF,F2F2F2,595959,0D0D0D*/
body {
background - color : #F2F2F2;
color : #0D0D0D;
font - family : Verdana , Geneva , sans - serif ;
}
h1 {
font - family : ”Trebuchet MS” , Arial , Helvetica , sans - serif ;
color : #595959;
background - color : #049DBF;
text - align : center ;
}
h2 {
color : #048ABF;
}
</ style >
< meta http - equiv = ”Content-Type” content = ”text/html; charset=UTF-8” >
< title > Simple Placement </ title >
</ head >
< body >
< article >
< header >
< h1 > Web Developer's Gym</h1>
</header>
<section>
<header>
<h2>Developer's Workout </ h2 >
</ header >
< figure > < img src = ”webDeveloper.gif” width = ”250” height = ”263” align = ”left”
align = ”workout” > </ figure >

189