The short answer to how to do this is you can't. The slightly longer answer is that you can't if your pages use HTML.
When someone views your page, their browser needs to be able to read your source code in order to be able to determine what your page contains and how to display it. The browser first copies the source from the internet to the user's Temporary Internet Files folder on their computer prior to rendering the page in their browser window. In many cases the source code for your page is still stored on their computer even after they have disconnected from the internet. Anyone with a text editor on their computer (and that's everyone with a computer) can then access your source code by editing these files that are stored on their own computer. If you stop them from being able to download your pages like this then you also stop them from being able to read your page at all so you may as well not upload it in the first place.
With HTML pages on the web, the only thing that you can do is to make things harder for novices who might want to learn from your code, anyone who wants to steal your code knows ways around all of the obstacles and will still be able to steal your page.
Another trick is to place a large comment (of fifty lines or so) in the top of your source that advises that your source is protected and cannot be viewed. Novices may not realize that they only have to page down to find the source code.
Unfortunately, the way the web works, all of the images on our page are also easily accessible along with the source code so there is no way to protect these from being stolen either. The best that we can do is to embed a copyright notice into the image itself which will hopefully discourage visitors from stealing them. For information about one way to place copyright notices into your images using Photoshop see "Adding a Copyright Notice".
The only real way to create web pages where the source cannot be viewed is to not use HTML. HTML is designed so that it can be created in a text editor and anyone with a text editor can read it.
Portable Document Format (PDF) files can also be displayed in a web browser (and display exactly as created rather than being rendered by the browser). PDFs require Adobe Acrobat to be able to create fully functional web pages and a freely available for download Acrobat Reader to be able to render them on the screen (a plug-in allows PDFs to render in browser windows).
Try to access the PDF source using a text editor and all you see is a mess of characters. Yes it is possible to extract the text from one of these files with a large amount of effort but the formatting information is in a totally unusable form. The only way to properly see the page complete with all of its formatting is to use Acrobat Reader or the full Adobe Acrobat product.
With PDF you can even build security into your page that restricts what people can do with your page (even if they have Acrobat) unless they know one of two passwords. One password is used to stop the page from being able to be opened at all by anyone who doesn't know it. The other password can be used to stop people who are viewing the page from performing one or more of the following: printing the page, changing the page, selecting text and graphics, and adding or changing note or form fields. This Acrobat Example page cannot be printed or edited by you even if you own a copy of the full version of Acrobat.
This article written by Stephen Chapman, Felgall Pty Ltd.