website code viewing

If I want to check out the code of a website that I like, or a particular aspect of that website, then how do I view it and keep the formatting (tabs, spaces etc) the same as when it was written? <br />
<br />
I have tried saving sites to my desktop and then viewing them using notepad. This messes up all the formatting and makes it difficult to navigate, and understand the code (esp. JS). <br />
<br />
Your help would be<!--content-->If you use the View menu and choose "Source" then it gives you the code as it was written. If there are no line breaks, then that's how it was written.<!--content-->The behaviour you describe is specific to the browser that you are using or it might be that the web author has formatted the page that way to discourage you or to minimize the file size. You could try a different browser but I would suggest that you use HTML-Kit (<!-- m --><a class="postlink" href="http://www.chami.com/html-kit/">http://www.chami.com/html-kit/</a><!-- m -->) to Download <!--more--> the source and play with it. Not only can you set it to display the HTTP headers, but it has a utility onboard known as Tidy. Among other things Tidy can reformat the markup to your liking.<!--content-->If you use the "View Source" button with any web site that is worth emulating, you would not see much more than is already presented by the browser. All layout information would be in a separate CSS file that is not as readily accessible.<br />
If you are interested in learning by example your best bet is to get Mozilla browser and do the following:<br />
1. Once you open the web site go to File -> Save Page As and save it as Complete Web Page. This action will save all the necessary files to your hard drive adjusting the linking information if needed.<br />
2. Make extensive use of DOM inspector, it allows you to change styles of web page elements on the fly and see how the change in property values affects the page layout.<!--content-->
 
Back
Top