Edit the Visualforce Page - Visualforce

Now that you’ve created the Visualforce page, you need to customize it for your own use. You can edit and preview the changes in real time.

1. You don’t want the heading of the page to say “Congratulations,” so change the contents of the <h1> tag to Hello World, remove the comments, and the “This is your new page” text. The code now looks like this:

   <apex:page> 
       <h1>Hello World</h1> 
   </apex:page>

2. Click the Save button at the top of the Page Editor.

The page reloads to reflect your changes. Note that Hello World appears in a large font. This is because of the <h1> tag—a standard HTML tag. Visualforce pages are generally composed of two types of tags: tags that identify Visualforce components (such as <apex:page>), and tags that are standard HTML.

Development mode, which you enabled in Step 1, makes development fast and easy. You can simply make changes, press Save, and immediately see the changes reflected. You can use a keyboard shortcut too—click CTRL+S to save at any time. You can also click the editor minimize button to see the full page.

When you deploy the page in a production environment, or if you switch off development mode, the editor will no longer be available.