For the example, you??™re going to see how to take a basic set of
contact details and then use microformats to provide users with a means of efficiently
downloading and storing the information as a vCard??”the vCard format being that
commonly used by address books). The semantic information is also of use to any other
application that is microformat-aware??”for example, some Firefox plug-ins are able to
auto-detect microformat information on any web page and enable a user to browse and
manipulate it.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
336
Required files The files from using-microformats-starting-point in the
chapter 8 folder.
What you??™ll learn How to use microformats to enhance a set of contact details.
Completed files using-microformats-completed in the chapter 8 folder.
1. Add a surrounding div. Open using-microformats.
html, and place a div with a class value of vcard
around the contact details content, as shown (truncated)
following:
Contact details
Mail
[...]
Mobile/cell: +1 (0)7000 555555
2. Structure the address. Marking up the address is fairly
simple, and few changes are required to the general
structure of the code. However, because each individual set of information requires
its own container, and the best way of creating a container for the address is to
place it within a block element of its own, the company name and the address each
need their own paragraphs, rather than a line break separating the two.
Pages:
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437