HTML and CSS Reference
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
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
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 >