Creating a Simple Visualforce Page - Apex

In this lesson you’ll create a new, very simple Visualforce page, the equivalent of “Hello World.”

1. In your browser, add the text /apex/Catalog to the URL for your Salesforce instance. For example, if your Salesforce instance ishttps://na1.salesforce.com, the new URL would be https://na1.salesforce.com/apex/Catalog.You’ll get an error message: Page Catalog does not exist.
   
2. Click the Create Page Catalog link to create the new page. The Catalog page will be created with some default code.
3. The Page Editor displays a preview of the new page above and the code below. It will look like this:
   If the Page Editor is collapsed, click the Expand () button at the bottom right of your browser window.
4. You don’t really want the heading of the page to say “Congratulations,” so change the contents of the <h1> tag to Product Catalog, and remove the comments and other plain text. The code for the page will now look something like this.

   <apex:page>
   
     <h1>Product Catalog</h1>
   
   </apex:page>

   You can add additional text and HTML between the tags, but Visualforce pages must begin with <apex:page> and end with</apex:page>.
5. Click the Save button () at the top of the Page Editor. The page reloads to reflect your changes.

Notice that the code for the page looks a lot like standard HTML. That’s because Visualforce pages combine HTML tags, such as <h1>, withVisualforce-specific tags, which start with <apex:>.