Getting Started with Salesforce Visualforce Email Template

Follow the wizard to create Visualforce email template from: Setup | Communication Templates | Email Templates | New Template and select Visualforce in Step 1 "Choose the type of email template you would like to create". You will get a basic Visualforce email template with Subject, Recipient Type (Contact, Lead, or User), and Related To Type Object.

<messaging:emailTemplate subject="Account Name" recipientType="User" relatedToType="Account">
<messaging:plainTextEmailBody >
Congratulations!
This is your new Visualforce Email Template.
</messaging:plainTextEmailBody>
</messaging:emailTemplate>

Few simple things you can modify the email template without programming:

1. Change subject to include merge field
Example: <messaging:emailTemplate subject="Account Name" recipientType="User" relatedToType="Account">
to
<messaging:emailTemplate subject="Account Name - {!relatedTo.Name}" recipientType="User" relatedToType="Account">

2. Add a ReplyTo address 
Example: <messaging:emailTemplate subject="Account Name - {!relatedTo.Name}" recipientType="User" relatedToType="Account">
to
<messaging:emailTemplate subject="Account Name - {!relatedTo.Name}" recipientType="User" relatedToType="Account" replyTo="support@acme.com">

3. Change Email format from Text to HTML
Example: <messaging:plainTextEmailBody > to <messaging:htmlEmailBody >

4. Add new line
As this is now HTML email, you can add <br/> for new line.

5. You can add recipient name
Example: <p>Dear {!recipient.name},</p>

6. You can add related field, including custom field
Example: Account Owner: {!relatedTo.CreatedBy.Name}<br/><br/>

7. You can add full URL as email body
Example: URL detail: <a href="{!LEFT($Api.Partner_Server_URL_370, FIND(".com/",$Api.Partner_Server_URL_370)+3)}/{!relatedTo.Id}">{!relatedTo.Name}</a>

8. You can add logic to include field
Example: <apex:outputPanel rendered="{!relatedTo.RecordType.Name='Customer' || relatedTo.RecordType.Name='Alumni'}">
Total Revenue: {!relatedTo.Total_Revenue__c}<br/><br/>
</apex:outputPanel>


Sample of complete email template:
<messaging:emailTemplate subject="Account Name - {!relatedTo.Name}" recipientType="User" relatedToType="Account" replyTo="support@acme.com">
<messaging:htmlEmailBody >
<p>Dear {!recipient.name},</p>
Account Owner: {!relatedTo.CreatedBy.Name}<br/><br/>

<apex:outputPanel rendered="{!relatedTo.RecordType.Name='Customer' || relatedTo.RecordType.Name='Alumni'}">
Total Revenue: {!relatedTo.Total_Revenue__c}<br/><br/>
</apex:outputPanel>

URL detail: <a href="{!LEFT($Api.Partner_Server_URL_370, FIND(".com/",$Api.Partner_Server_URL_370)+3)}/{!relatedTo.Id}">{!relatedTo.Name}</a>

</messaging:htmlEmailBody>
</messaging:emailTemplate>


For advance page with apex controller, you can use Visualforce Component, and use apex class as Controller.
Example: <c:AccountNotification AcctId="{!relatedTo.Id}"/>

In the component specify the apex class as controller
<apex:component controller="AccountEmailNotify" access="global">
</apex:component>


Reference:

• Visualforce Email Template Sample
• Creating a Visualforce Email Template