# hCard Microformat (part 2)

### Roger Costello

Click arrow key () to navigate to next page

# Second Example using n

- Example: markup this HTML text using the hCard properties:

1. <cite>Dr. John Philip Paul Stevenson, Jr., M.D., A.C.P.<cite>

- Here is the marked up text:

1. <cite class="fn n">
2. <span class="honorific-prefix">Dr.</span>
3. <span class="given-name">John</span>
4. <span class="additional-name">Philip</span>
5. <span class="additional-name">Paul</span>
6. <span class="family-name">Stevenson</span>,
7. <span class="honorific-suffix">Jr.</span>,
8. <span class="honorific-suffix">M.D.</span>,
9. <span class="honorific-suffix">A.C.P.</span>
10. </cite>

- Note the repeated additional-name and honorific-suffix properties.

# Second Example using n

- Here is the HTML document marked up with the hCard properties: second Example using n

# hCard Profile

- The HTML <head> element has an optional "profile" attribute.
- The value of this attribute is a space-delimited list of URLs.
- For each Microformat there is a URL to an HTML document which defines the properties and subproperties of the Microformat.
- You must add the profile attribute to any HTML document that you markup with hCard (or any Microformat).
- The URL for hCard is: http://www.w3.org/2006/03/hcard

1. <html>
2. <head profile="http://www.w3.org/2006/03/hcard">...</head>
3. <body>...</body>
4. </html>

# Lab 1

- Markup this HTML using hCard properties:

1. <head>
2. <title>Stephen Hawking</title>
3. <meta http-equiv="content-type" content="application/xhtml+xml;charset=UTF-8" />
4. </head>
5. <body>
6. <h1>Stephen Hawking</h1>
7. <p>Stephen William Hawking, CH, CBE, FRS (born 8 January 1942) is a theoretical physicist.
8. Hawking is the Lucasian Professor of Mathematics at the University of Cambridge, and a
9. Fellow of Gonville and Caius College, Cambridge. He is known for his contributions to
10. the fields of cosmology and quantum gravity, especially in the context of black holes,
11. and his popular works in which he discusses his own theories and cosmology in general.
12. These include the runaway popular science bestseller A Brief History of Time, which stayed
13. on the London Sunday Times bestseller list for a record-breaking 237 weeks.
14. </p>
15. </body>

- Here is the HTML document: Stephen-Hawking.html

# Lab 1 (cont.)

- Name the new version of the HTML file: Stephen-Hawking-revised.html
- After marking up the HTML with the hCard properties:
  1. Validate your HTML using the W3C HTML validator: http://validator.w3.org/
  2. Use Brian Suda's xhtml2vcard.xsl tool to extract the hCard and generate a vCard (.vcf file). In the lab 1 folder is run.bat. Double click on it, and it will invoke Brian's tool.

# Determining the Value of fn, Case 1

- Case 1: The contents of the fn element is pure text.
- The value of fn is the pure text.
- Example:

1. <cite class="fn">Dr. John Q. Smith, M.D.</cite>

- The value of fn is:

1. Dr. John Q. Smith, M.D.

# Determining the Value of fn, Case 2

- Case 2: The fn element has one or more "value" elements.
- Example:

1. <p class="fn">
2. <span class="value">John </span>
3. is the speaker. Dr.
4. <span class="value">Smith</span>
5. will talk on ...
6. </p>

- The value of fn is the concatenation of the value elements.

1. concatenation('John ', 'Smith') = John Smith

# Determining the Value of fn, Case 3

- Case 3: The fn element has one or more child elements.
- The value of fn is obtained as follows:
  1. concatenate the text outside the child elements with the text inside the child elements
  2. normalize the resulting string (i.e., strip leading and trailing spaces, replace consecutive white spaces with a single space)
- Example:

1. <p class="fn n">
2. <span class="given-name">John</span>
3. <span class="family-name">Smith</span>
4. </p>

# Determining the Value of fn, Case 3

- Before normalization:

1. '
2. John
3. Smith
4. '

- After normalization, the value of fn is:

1. 'John Smith'

# Determining the Value of fn, Case 4

- Case 4: The fn element is abbr.
- The value of fn is the value of the abbr "title" attribute.
- Example:

1. <abbr class="fn" title="John Smith">John</abbr>

- The value of fn is:

1. John Smith

# nickname Property

- nickname - use to specify the nickname of the person.
- Example: markup this HTML text using the hCard properties:

1. <cite>Roger (Rocket) Clemens<cite> is the pitcher for the Houston Astros.

- Here is the marked up text:

1. <span class="vcard">
2. <cite class="fn n">
3. <span class="given-name">Roger</span>
4. (<span class="nickname">Rocket</span>)
5. <span class="family-name">Clemens</span>
6. </cite>
7. </span>
8. is the pitcher for the Houston Astros.

- View example03 (using nickname).

# photo Property

- photo - use to specify the URL to a photo of the person.
- Example: markup this HTML "img" element using the hCard photo property:

1. <img src="http://www.xfront.com/images/Roger.gif" alt="Photo of Roger Costello" />

- Here is the modified img element:

1. <img class="photo" src="http://www.xfront.com/images/Roger.gif" alt="Photo of Roger Costello" />

- The value of the photo property is the URL found in the src attribute.
- View example04 (using photo).

# Alternative to the img Element

1. <object class="photo" data="http://www.xfront.com/images/Roger.gif">Photo of Roger Costello</object

- The value of the photo property is the URL found in the data attribute.

# bday Property

- bday - use to specify the birthday of the person.
- Example: markup this text using the hCard properties:

1. Stephen Hawking's birthday is January 8, 1942.

- Here is the marked up text:

1. <span class="vcard">
2. <span class="fn n">
3. <span class="given-name">Stephen</span>
4. <span class="family-name">Hawking</span></span>'s birthday is
5. <abbr class="bday" title="1942-01-08">January 8, 1942</abbr>
6. </span>

- View example05 (using bday).

# abbr Element

- Notice the use of the abbr element in the last example:

1. <abbr class="bday" title="1942-01-08">January 8, 1942</abbr>

- The content of abbr (January 8, 1942) is for humans.
- The value of the title attribute (1942-01-08) is for machines.
- hCard aggregators use the title as the value for bday, not the value of abbr.

# Delivery Address Properties

- Delivery address properties are used to provide address information for the person.
- These are the delivery address properties:
  - adr - structured address (the parts of the address are identified)
  - label - the address, without the parts being identified

# adr Property

- adr - use to specify the components of an address. Further, the "type" subproperty is used to specify the type of address (home, work, etc).
- Here are the subproperties of adr:
  - post-office-box
  - extended-address (suite number, apartment number, etc)
  - street-address
  - locality (e.g., city)
  - region (e.g., state or province)
  - postal-code (e.g., zipcode)
  - country-name
  - type - the value of this subproperty is one of these:
    - dom (domestic delivery address), parcel, home, work, pref (preferred delivery address)

# adr Property

- Example: markup this HTML text using the hCard properties:

1. <p>The home address of John Q. Smith is:<br />
2. 10 Bolyston St.<br />
3. Boston, MA 01210
4. </p>

# adr Property

- Here is the marked up text. View example06 (using adr).

1. <p>The
2. <span class="vcard">
3. <span class="adr">
4. <span class="type">home</span>
5. address of
6. <span class="fn n">
7. <span class="given-name">John</span>
8. <abbr class="additional-name" title="Quinlan">Q.</abbr>
9. <span class="family-name">Smith</span>
10. </span>
11. is:<br />
12. <span class="street-address">10 Bolyston St.</span><br />
13. <span class="locality">Boston</span>,
14. <abbr class="region" title="Massachusetts">MA</abbr>
15. <span class="postal-code">01210</span>
16. </span>
17. </span>
18. </p>

# Using Multiple "type" Subproperties

- Example: markup this HTML text:

1. The preferred delivery address is his home address ...

- Here is the marked up text:

1. The
2. <span class="type">pref</span>ferred
3. delivery address is his
4. <span class="type">home</span> address ...

# Added Information

- Example: markup this HTML text using the hCard properties:

1. Address:
2. 10 Bolyston St.
3. Boston, MA 01210

- Here is the marked up text:

1. <span class="adr">
2. <abbr class="type" title="pref,home">Address:</addr>
3. <span class="street-address">10 Bolyston St.</span>
4. <span class="locality">Boston</span>,
5. <abbr class="region" title="Massachusetts">MA</abbr>
6. <span class="postal-code">01210</span>
7. </span>

- Notice that I added information not present in the original HTML text; namely, that this is his preferred, home address.

# type Values

- If no type subproperty is specified then it defaults to type=intl, postal, parcel, work (i.e., the address is an international work address, for both postal and parcel deliveries).
- The type values are case insensitive. Thus, home, Home, HOME are all equivalent.

# adr Microformat

- We have seen that adr is a "property" of the hCard Microformat.
- adr is also a standalone Microformat. It can be used on its own, independent of hCard.
- The adr profile URL is the same as hCard's profile URL.

# Continued ...

- Click here for Part 3 of the hCard Tutorial
- Click here for Part 1 of the hCard Tutorial
- Click here for Part 2 of the hCard Tutorial
- Click here for Part 4 of the hCard Tutorial
- Click here for Part 5 of the hCard Tutorial