Salesforce :: Can not add Visual Force page to Custom button

1. At first create a custom controller (Apex Class) with following contents:

public with sharing class CommonController {

    private ApexPages.StandardController standardController;
    
    public Account account { get; private set; }
    
    public CommonController (ApexPages.StandardController standardController) {
        this.standardController = standardController;
        Id recordId = standardController.getId();
        account = (Account) standardController.getRecord();
    }
    
    public PageReference doSomething() {
        //after some tasks return to Account details view
        return standardController.view();
    }
    
    public PageReference cancel() {
        // return to account details view
        return standardController.view();
    }
    
}

2. Create a "Visualforce Pages" page with following contents:

<apex:page standardController="Account" extensions="CommonController">
    Account_Selected=<b>{!Account.Name}</b><br/>
    <apex:form >
        <apex:commandButton value="Do something in CommonController.doSomething()" action="{!doSomething}"/>
        <apex:commandButton value="Cancel this process & return to details view" action="{!cancel}"/>
    </apex:form>
</apex:page>

3. Go to "setup/Customize/Accounts/Buttons, Links, and Actions" and click on "New button or link"
4. Select "Display Type" as "Detail Page Button"
5. Select "Behavior" as "Display in existing window without sidebar or header"
6. Select "Content Source" as "Visualforce Page"
7. And finally select a controller created before from "Content" dropdown.
8. Now go to "setup/Customize/Accounts/Page Layouts"
9. Edit any of your layout you used to test this case
10. Select "Buttons" panel and drop the button created before in details panel
11. Now go to your account details page and now you can see the button available.

Salesforce create custom controller

1. Go to "setup/Develop/Apex Classes" and click "new"
2. Write the following code:

public class CustomController {

    public Account account { get; private set; }

    public NewAndExistingController() {
        Id id = ApexPages.currentPage().getParameters().get('id');
        account = (id == null) ? new Account() :
            [SELECT Name, Phone, Industry FROM Account WHERE Id = :id];
    }

    public PageReference save() {
        try {
            upsert(account);
        } 
        catch(System.DMLException e) {
            ApexPages.addMessages(e);
            return null;
        }
        //  After successful Save, navigate to the default view page
        PageReference r = new ApexPages.StandardController(Account).view();
        return (r);
    }
}

3. Go to "setup/Develop/Visualforce Pages" and click "new"
4. Write the following code:

<apex:page controller="CustomController" tabstyle="Account">
    <apex:form>
        <apex:pageBlock mode="edit">
            <apex:pageMessages/>
            <apex:pageBlockSection>
                <apex:inputField value="{!Account.name}"/>
                <apex:inputField value="{!Account.phone}"/>
                <apex:inputField value="{!Account.industry}"/>
            </apex:pageBlockSection>
            <apex:pageBlockButtons location="bottom">
                <apex:commandButton value="Save" action="{!save}"/>
            </apex:pageBlockButtons>
        </apex:pageBlock>
    </apex:form>
</apex:page>

5. Go to "setup/Create/Tabs" click on "new" under group "Visualforce Tabs"
6. Select "Visualforce Page" created before & provide other information & save.

7. Browse your custom tab to access the custom tab.

Show HTML string as an HTML output instead of plain text in Salesforce Visaul Force page

Write the following code snippet:

<apex:outputLabel escape="false" Value="{!html}" ></apex:outputLabel>

Instead of the following:

{!html}