Lesson 8

CSS Basics

Prerequisites

Basic HTML

Objective

To learn what a microformat is and how to properly use them.

Terms

vCard

A vCard is a file format standard for electronic business cards. vCards are often attached to e-mail messages, but can be exchanged in other ways, such as the internet or through text messaging. They can contain name and address information, phone numbers, and other basic contact information.

Basic Terms Used In A vCard

N; is your name or the name of the owner of the vCard

FN; is your full name or the full name of the owner of the vCard

ORG; is the name of the organization associated with the vCard

TEL; is the phone number associated with the vCard.

An example of a vCard setup.

BEGIN: VCARD

VERSION:3.0

N:Gump;Forrest

FN:Forrest Gump

ORG:Bubba Gump Shrimp Co.

TITLES:Shrimp Man

PHOTO;VALUE=URL;TYPE=GIF:http://www.site.com/lib/imgs/my_photo.gif

TEL;TYPE=WORK,VOICE:(111) 555-2222

TEL;TYPE-HOME,VOICE:(404) 555-1212

ADR;TYPE=WORK:;;100 Waters Edg;Baytown;LA;30314;United States Of America

LABEL;TYPE=WORK:;;100 Waters Edge;Baytown;La;30314\nUnited States of America

ADR;TYPE=WORK:;;42 Waters Edg;Baytown;LA;30314;United States Of America

LABEL;TYPE=WORK:;;42 Waters Edge;Baytown;La;30314\nUnited States of America

EMAIL;TYPE=PREF, INTERNET:forrestgump@example.com

REV:20080424T195243Z

END:VCARD

Download and Add to Contacts Here

hCard

Is the use of a vCard in an HTML format

Example of an hCard setup

<div class="vcard">

<a class="fn org url" href="http://cbt2.rileystekervetz.com" target="_blank"> MY SITE </a>

<div class="adr">

<span class="type"> SCHOOL: Ai of York</span>

<div class="street-address"> 1409 Williams Road, York, PA 17402-9012</div>

<span class="locality">YORK </span>

<abbr class="region" title="Pennsylvania"> PA</abbr>

<span class="postal-code">17402</span>

<div class="country-name">USA</div>

</div>

<div class="tel">

<span class="type"> WORK:</span> (123) 456 7890

</div>

<div class="tel">

<span class="type"> FAX:</span> (123) 456 7891

</div>

<div> Email:

<span class="email">my@email.com</span>

</div>

</div>

iCalendar

An iCalendar is a file format that allows people to send meeting request and task to other people through emails and other methods of sharing files

Example of an iCalendar setup.

BEGIN:VCALENDAR

VERSION:2.0

BEGIN:VEVENT

UID:mrwalrus11@gmail.com

DTSTAMP:19950814T10000Z

DTSTART:20150406

SUMMARY: Riley Stekervetz Birthday

CATAGORIES: BIRTHDAY,PERSONAL,SPECIAL,OCCASION

RRULE:FREQ=YEARLY

END:VEVENT

END:VCALENDAR

Download and Add to Calendar Here

hCalendar

An hCalendar is the html formated version of an iCalendar

Example of an hCalendar setup.

<p class="vevent">

The <span class="summary">My Birthday Is</span> on the 1st of November from

<abbr class="dtstart" title="2001-01-14T14:00:00+6:00">2</abbr>

<abbr class="dtend" title="2001-01-14T16:00:00+6:00">4</abbr> PM at

<span class="location"> My House </span>

</p>

Try It Yourself

For your example do the following.

Fit the vCard to match your own personal uses!

Test Your Knowledge Here!