This might be of some help. http://hypernephelist.com/2016/06/21/a-simple-smart-contract-ui-web3.html
There are frameworks that conveniently deal with dependencies, so a lot of us prefer to go that route. A very high-level overview if what's described in the link, is you will need to:
- load the web3 API
- get the ABI (a JSON helper that describes the interface to the contract)
- initialize an instance of the contract at the address where the contract resides using web3.
- call() (read-only, fast and gas-free, returns value) or sendTransaction() (state-changing, needs mining, costs gas, returns txnHash).
- you get a callback from step 4. Wait for the transaction to be mined and then get the mined transaction to see the values, if it was a state-changing transaction.
I hope I didn't miss a step. It's high-level. The link above seems to cover the steps described. :-)
Hope it helps.
In my opinion, no need to describe an example, the doc speaks by itself.
Give a try to Embark, the
embark demo route is a very good way to quickly get started.