1.1 Display an html page in a Visualforce page

A Brief Concept

What is an Visualforce page?

Let’s forget about the complicated definition. Visualforce page is simply a container to put your html page together with some Visualforce tags which helps you to talk to the backend(Apex and SObjects). It is a web page format which can be used inside Salesforce.

So let’s first take a look at how it can be used as a simple container for html file.

A Simple Example

In your developer console, click File > New > Visualforce page to create a new page. And give it a nice name. Then type in the following code:


<apex:page >
    <style>
        h1 {
            font-size: 25px;
        }
        #Hello {
            color: red;
            font-size:20px;
        }
    </style>
    <h1>
        Simple Html page
    </h1>
    <p>
        This is our first simple Visualforce page. 
    </p>
    <p id="Hello">
        Hello Visualforce!
    </p>
</apex:page>

Simple, isn’t it?

How to test it? You can view the page via: http://[your salesforce instance].salesforce.com/apex/[your visualforce page name]

For example, my Visualforce page name is SimpleVisualforcePage. So my url is: ap7.salesforce.com/apex/SimpleVisualforcePage. Try open it!

Your page should look similar to this:

A Little Explanation

Basically, you just replace your html tag with apex:page. And everything else is pretty much the same as you did in your regular html.

In every Visualforce page, the file is enclosed within an apex:page tag, the same as regular html files are enclosed in html tags. So that is pretty much it!

Next Post

1.2 What is developer mode and whether to use it

Subscribe to Sfdcinpractice

Subscribe to get the latest blogs and tutorials of sfdcinpractice. No spam, no trash, only the awesome posts from sfdcinpractice. 

Leave a Reply

Your email address will not be published / Required fields are marked *