Other People's Work

It is simple to get a look at and even save any web pages you find on the Web. It is important to be careful who you trust, or least be careful when you use someone else's work as an example. Most web pages do not use best-practice techniques, so avoid using someone else's code unless the code passes validation. However it is possible to learn as much from other people's errors as it is from code that is perfect.

Viewing the Source

We all have the ability to view the source code of other people's web pages. You can learn a lot by simply taking a peek at how someone else's web page was built. How do you do that? Every browser uses slightly different terminology and sometimes the menu item needed is not in the same menu from browser to browser. However the variations in the ways different browsers let us view web page code are small, the process does not need to be described for every browser. Here is a technique you can use to view a web page source in Mozilla Firefox.

1. Bring up a page in your browser, for example the author's home page (handsonweb.com). Since it is my site you can be confident it meets the current standards.
2. Position your cursor somewhere on the page (other than over an image), and Right click (Ctrl Click on a Mac). You should be presented with a context menu similar to those shown in the image below.
3. Select View Page Source, (it may be called View Source in other browsers) and a new window will appear, displaying all of the page's underlying markup.

Selecting the View Source command after right-clicking on a web page (as seen in Firefox)

And here's what appears when you select View | Source.

Partial listing of source code for handsonweb.com

The browser menus are an alternative to the Right Click (or pop-up) menu. Usually View | Source is found in the View menu. Some older browsers have it in the Edit or even the File menu.

If you find a page which has code that you would like to work with as well as look at, then you need to save the page. In the File menu look for Save or Save As or Save Page. Most browsers will save not only the page code but also any other files so that the page looks the same when viewed on your computer as it does when viewed on the Web. That means you may capture any image files plus any CSS files plus any JavaScript files that are part of the page. All of the "extra" pages will be put into a folder with the same name as the web page file.

Why Is This Useful?

As you are learning how to build pages, or even when you are an experienced site designer, you will want to learn how others made their pages look the way they do. You may want to include some of the same features in your pages. You may want to modify what you found into something else. Having access to the code gives you access to learning new techniques. As you work through this book please use either View | Source or your HTML editor (Notepad, TextEdit, nano, HTML-Kit, Cocoa, Bluefish, whatever) to look at how the pages of the book were written. The book includes samples of code, but usually only enough to help you learn a particular element or technique. You need to know how these elements are put together to make pages and how pages are linked together to make a site (or chapter in the case of this book). So use View | Source, open the files in your editor and learn how I put this book together. Then save the files and play with them. Have fun learning how to make web pages and web sites.