NAVIGATION STRATEGIES - HTML5 - page 162

Such images transcend language dif erences and help a wider audience base. Likewise,
younger children are more likely to understand certain symbols than they are certain words.

h e format for using images for identifying links is the same as it is for text. However, instead
of placing text in an <a> container, you use an image reference. h e following code snippet
shows the basic format:

< a href = ”page2.html” >< img src = ”arrowRight.jpg” ></ a >

Users see an arrow icon and click it instead of a text message. Ot en, designers will use both
text and an image to send users to another page, as shown in the next snippet:

< a href = ”page2.html” >< img src = ”arrowRight.jpg” > Next Page </ a >

Also, some designers create icons with text embedded in the symbol, as shown in Figure 8-9.

Figure 8-9: Link image with text.

One advantage designers i nd in using graphic text is that they can use any font they want
without fear that the user won't have that particular font in his system. It also helps to keep
users from getting lost because graphic symbols with text are easy for the user to spot and
understand.

166

SINGLE-PAGE WEB SITES WITH IFRAMES
h ink of a Web site as a loading zone. Whenever, you click a link, you load another page —
graphics and all. Sometimes, all you want to do is load just one thing. h at saves the user from
having to wait for all the other stuf to load or reload. If you know a bit of JavaScript and Ajax,
you can do that, but what about with just HTML5? h e answer is yes!

h is section examines how to link to graphics and change the graphic in an iframe. When
creating applications designed specii cally for mobile devices, you want to use as little
bandwidth as possible. By changing just one thing on a Web page, the mobile device just has
to load or reload a single item, so the response time is less.

LINKING TO A GRAPHIC
Generally, when we think of adding graphics to a page, we think of the <img> tag. At er
all, that tag is what we use to place graphics on a Web page. However, you also can use the
<a href> tag to load a graphic. Instead of assigning a Web page path to the href assignment,
assign a graphic. For example, the following line of code loads a blank page with a graphic:

< a href = ”myGraphic.jpg” > My Graphic </ a >