A browser’s primary function is to display web pages. However, for a web developer, browsers are much more useful than that. Whenever you visit a web page, your browser fetches a tremendous amount of valuable information, such as the HTML source of the page, image files that appear on the page, and other associated files. This section describes how to use your browser to retrieve that information.
Since browser makers love to change the names and locations of these functions from version to version, the instructions below might not apply if you’re using a different browser version than the one listed.
By far the most valuable browser tool is View Source, which displays the HTML source of the page. Viewing source is one of the fastest ways to learn how to code. If you’re not sure how some feature of HTML works, you can view the source of a site that uses the feature, copy and paste sections of code, make alterations, and see what happens.
Internet Explorer, Firefox: Right-click on the window and select View Source.
Safari: Ctrl-click on the window and select View Source.
Opera: Right-click on the window and select Source.
Figure 1.1. View Source (Firefox)
Although viewing the source is incredibly useful, keep in mind these two caveats:
It’s okay to copy and alter a site’s source for learning purposes on your home machine, but don’t post any such material on your public website. This goes for both the text on the site and the underlying code or design.
Most sites on the web have terrible underlying code. Learning how to code by randomly viewing websites is like learning how to compose song verse by randomly reading poetry written by kids. You might encounter some brilliant stuff… but quite frankly, the odds are pretty low. As you’re starting out, take care not to assume that just because
BigFamousWebsite.comcoded their home page a certain way, that this was the best way to do it.
Another invaluable browser function is the ability to save image files. Every time your browser visits a web page, it also downloads all the images that display on the page. You can save these files and reuse them for educational purposes.
Internet Explorer: Right-click on the window and select Save Picture As…
Firefox: Right-click on the image and select Save Image As… to save the image as a file, View Image to view the image by itself in the browser, or Properties to view the image’s file size and other properties.
Safari: Ctrl-click on the image and select Save Image to the Desktop to save the image as a file or Open Image in New Window to view the image by itself in the browser.
Opera: Right-click on the image and select Save Image… to save the image as a file, Open Image to view the image by itself in the browser, or Image properties to view the image’s file size and other properties.
As with View Source, you should never take someone else’s images, altered or unaltered, and post them on a public site unless you have permission. There are numerous free image repositories all over the web, where you can get clip art, backgrounds, and photos that are either in the public domain or offered under reasonably liberal licenses.
View Page Info
The View Page Info function provides secondary technical information about the page, such as the page size in bytes and the text encoding. This information might not seem all that useful when you’re first starting out, but it’s invaluable for more advanced coders.
Internet Explorer 6: Right-click on the window and select Properties.
Firefox 1.5: Right-click on the window and select View Page Info.
Opera 9: Select Tools | Appearance | Panels, check the Info checkbox, and click OK.
Figure 1.2. View Page Info (Firefox)
The information displayed varies from browser to browser. Firefox provides more useful information than Internet Explorer, including a full list of all images on the page (with height, width, and size in bytes). Opera takes an interesting approach: if you activate the Info panel, you can view this information alongside each page you browse to. Opera also provides a shortcut (Ctrl-J) for displaying all the links on the page.
Unfortunately, Safari doesn’t provide any sort of View Page Info functionality. Safari has a simple interface and does a fine job rendering pages, but it offers a relatively weak array of tools for the budding web developer.
Several browsers offer some sort of “webdev toolbar”: a downloadable set of menus and options for your browser that are specifically designed to help understand the structure of a webpage. Toolbars can offer a dizzying array of useful functions, but as with View Page Info, they are probably more useful for experienced web developers.
Figure 1.3. Webdev Toolbar (Firefox)