TEXT TAGS AND A LITTLE CSS3 - HTML5 - page 44

Given the tags discussed so far, will you be able to create a page based on the sketch? h e only
attribute lacking is one to wrap the text around the image. h e align attribute of the img
element will do that. In this case, the image will be to the let and the text to the right, so the
following line will do the trick:

< img src = ”kid.png” alt = ”kid” align = ”left” >

You may have noticed that the alt attribute was also included. h at attribute lets users know
what to expect if the image takes a while to load.

So, now, with just a few tags and an added attribute, this next script does a fair job of creating
the page with the structure in the sketch in Figure 3-3.

As you'll see in the following code ( Sketch2Web.html in this chapter's folder at www.
wiley.com/go/smashinghtml5 ), I've used a pound sign ( # ) instead of an actual URL in
the navigation links. h e pound sign acts as a placeholder while we're working on the struc-
ture; it works just like a real URL except that it doesn't go anywhere or cause an error message.

<! DOCTYPE HTML >
< html >
< head >
< meta http - equiv = ”Content-Type” content = ”text/html; charset=UTF-8” >
< title > Sketch to Web </ title >
</ head >
< body >
< img src = ”logo.png” alt = ”logo” >< br >
< a href = ”#” > Toys </ a > & nbsp ;|& nbsp ;< a href = ”#” > Clothes </ a >& nbsp ;|& nbsp ;< a
href = ”#” > Sports </ a > < br >
< br >
A Good Place for Kids < br >
< br >
< img src = ”kid.png” alt = ”kid” align = ”left” > Kids are serious business . They need toys
that are both safe and educational. Toys need to be fun and allow children's minds
to create beyond any functionality the toy has. There is no reason that they cannot
be both safe and fun. Children need lots of clothes because they grow so fast. And
they need sports to offset childhood obesity and the illnesses associated with
obesity. < br >
< br >
< a href = ”#” > Toys </ a > &nbsp ;|& nbsp ;< a href = ”#” > Clothes </ a >& nbsp ;|& nbsp ;< a
href = ”#” > Sports </ a >
</ body >
</ html >

48

Notice that we didn't use any of the H elements introduced in the previous two chapters. h at's
because I cover them in the next section and give you a better sense of their value. Figure 3-4
shows how close the page came to the sketch in Figure 3-3.