about this tutorial
Goal
The objective of this tutorial is to teach you how to insert HTML Microformats into your website.
Lessons
Through this tutorial, users will learn the following HTML Microformats; their functionality and how to properly use them:
<? php ?>
vCard
hCard
vCalendar
hCalendar
Prerequisite
FFor this tutorial, you will need to know all the basic fundamentals of HTML and CSS. If you don’t remember or feel you are ready, please review the pervious website, School of HTML and CSS.
what are HTML Microformats?
The internet is always growing and evolving. Developers everywhere create new way and easier ways to convey data information to the user. One of those ways is HTML Microformats.
HTML Microformats allows developers a convenient ability to give data like contact, event and other information. There two methods to integrate Microformats on your website. One is by external, which are vCard and vCalendar. The other is by using HTML only, which are hCard and hCalendar.
<? php ?>
To use vCard and vCalendar, create a separate php document. You will need use the php tag, then tell the computer what kind of content it is and where to download the file.
Example:
<? php
header('Content-Type: text/calendar; charset=utf-8');
header('Content-Disposition: attachment; filename="birthday.ics"');
?>
vCard
Developers can utilize HTML Microformats to create a web-based electronic business or personal card, this type of HTML Microformat is called the vCard. Its primary purpose is to allow the user to click on a tab or a button in order to add your or your business contact information for emails and websites. The HTML vCard includes a name, company name, logo, location, web address, and phone number. These properties need to capitalized, in addition a semicolon connects the words together.Some of the properties to create a simple vCard, follow:
BEGIN:VCARD: This property will start to denote the following code as a vCard.
N: Stands for the name of the person or organization behind the vCard. The last name appears; first followed by a semicolon and then the first name.
FN: Stands for the full name.
EMAIL: Stands for email. In conjuration with this property, use TYPE to determine, if the mail address is for HOME or WORK.
ORG: Stands for the title of organization.
TITLE: Stands for the job position.
TEL: Stands for the telephone number. In conjuration with this property, use TYPE to determine if the phone is for HOME or for WORK.
ADR: Stands for the address of the person or company.
END: VCARD: Will close the vCard.
Example:
<? php
header('Content-Type: text/calendar; charset=utf-8');
header('Content-Disposition: attachment; filename="BryanKnight.vcf"');
?>
BEGIN:VCARD
VERSION:3.0
N:Knight;Bryan;
FN:Bryan Knight
EMAIL;type=INTERNET;type=WORK:bryan_knight@stu.aii.com
TEL;type=WORK:1-888-555-5555
TEL;type=HOME;type=pref:1-717-555-0000
TEL;type=CELL:1-717-101-0101
item1.ADR;type=WORK;type=pref:;;1409 Williams Rd.;York;PA;17402;United States
item1.X-ABADR:us
X-AIM;type=HOME;type=pref:www.knightcreativemedia.com
X-ABUID:0B0CCDA6-7F4E-489C-8723-76CFE3308BE1\:ABPerson
END:VCARD
hCard
The hCard has similar functions to vCard, it is used to publish contact information on websites. Also, hCard works with parsing tools. There are significant differences between hCard and vCard. The hCard is a construct in HTML. Additionally, the hCard helps search engines to crawl through your website. If you want to read about search engines go to the SEO basics tutorial. To use hCard in HTML, you just need to insert class names. For instance, <div="hcard">. Below are two examples:
Example #1: Without Mircoformat
<div>
<a href="http://www.knightcreativemedia.com/">Knight Creative Media</a>
<div>
<span>Work</span>:
<div>100 Columbia Ave</div>
<span>Lancaster,</span>
<abbr>PA</abbr>
<span>17547</span>
<div>USA</div>
</div>
<div>
<span>Work</span> +1-717-555-555
</div>
<div class="tel">
<span>Fax/span> +1-717-333-0000
</div>
<div>Email:
<span>info@knightcreativemedia.com</span>
</div>
</div>
Example #2: With Mircoformat
<div class="vcard">
<a class="fn org url" href="http://www.knightcreativemedia.com/>Knight Creative Media</a>
<div class="adr">
<span class="type">Work</span>:
<div class="street-address">100 Columbia Ave</div>
<span class="locality">Lancaster,</span>
<abbr class="region" title="Pennsylvania">PA</abbr>
<span class="postal-code">17547</span>
<div class="country-name">USA</div>
</div>
<div class="tel">>
<span>Work</span> +1-717-555-555
</div>
<div class="tel">
<span class="type">Fax/span> +1-717-333-0000
</div>
<div>Email:
<span class="email">info@knightcreativemedia.com</span>
</div>
</div>
Result
vcalendar
vCalendar being developed alongside with vCard, are electronic schedules where users can drag the information to a PIM. In other words, if a company wants to send users an email with an attachment of a calendar for upcoming events, they sould attach a vCalendar. The vCalendar is supported by marjor tech companies like Apple, Google, Microsoft, Mozilla and Yahoo! The following are some of the properties to create a simple vCalendar:
BEGIN: This property will start to denote the following code as a vCalendar. We will use this property twice: first, for VCALENDAR; and second, for VEVENT, which will create an array for the events.
VERSION: This property is required to declare which version is used. In this case, we use 2.0.
PRODID: This property is the string.
UID: This property gives a unique id to events.
DTSTAMP: This property is the time stamp of the last modification.
ORGANIZER: This property is for the name of the organizer.
DTSTART: This property gives the start time of the event. It is in an ISO 8601 format.
DTEND: This property gives the end time of the event. It is in an ISO 8601 format.
SUMMARY: This property gives the name of event.
END: This property will close the vCalendar. Do it again to close the VEVENT.
Here is how it should look like:
Example:
<?php
header('Content-Type: text/calendar; charset=utf-8');
header('Content-Disposition: attachment; filename="birthday.ics"');
?>
BEGIN:VCALENDAR
VERSION:2.0
BEGIN:VEVENT
UID:bryan_knight@stu.aii.com
DTSTAMP:20140306T1400Z
DTSTART:20140623
SUMMARY:Bryan Knight Birthday
CATEGORIES:BIRTHDAY,PERSONAL,SPECIAL OCCASION
RRULE:FREQ=YEARLY
END:VEVENT
END:VCALENDAR
hcalendar
The same as before with hCard, the hCalendar is the HTML version of vCalendar. Use the Mircoformat cheatsheet to see the list of properties. Below are two examples: first, is a regular layout; and the second uses Mircoformat.
Example #1:
<p>
The <span>Modern Art Show</span>
on 15 march 2014
<abbr>10:00</abbr>am-
<abbr>6:00</abbr>pm at
<span> Museum of Modern Art (MoMA)p></span>
(<a class="url" href="http://www.moma.org/" target="_blank">more information</a)
</p>
Example #2:
<p class="vevent">
The <span class="summary">Modern Art Show</span>
on 15 march 2014
<abbr class="dtstart" title="2014-03-15T110:00:00+06:00">10:00</abbr>am-
<abbr class="dtend" title="2014-03-15T16:00:00+06:00">6:00</abbr>pm at
<span class="location"> Museum of Modern Art (MoMA)</span>
(<a class="url" href="http://www.moma.org/">more information</a>)
</p>
Result:
The Modern Art Show on 15 march 2014 10:00am- 6:00pm at Museum of Modern Art (MoMA) (more information)
Summary
HTML Microformats give developers an easier way to deliver data such as contact, event and other information to users.
If you want or need to see alternate explanations and tutorials of HTML Microformats, check out these links and videos:
practice
Now that we have learned about HTML Microformats, it’s time to put it into action. All you have do is to download the vCalendar and add it to your personal information manager.
Now do the following steps:
Click on the File tab
Click on Import
Find and click on the vcs file
Click on Next
Click the vCalendar file
Click on Open, and you are done