Browser Tools
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.
Note
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 tested at the time this section was written.
View Source
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. To view source:
-
Internet Explorer, Firefox: Right-click on the window and select .
-
Safari: Ctrl-click on the window and select .
-
Opera: Right-click on the window and select .
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 verse by randomly reading poetry written by kids. You might encounter some brilliant stuff… but the odds are pretty low. Never assume that just because
BigFamousWebsite.comcoded their home page a certain way, that this was the best way to do it.
Save Images
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. To save an image:
-
Internet Explorer: Right-click on the window and select
-
Firefox: Right-click on the image and select to save the image as a file, to view the image by itself in the browser, or to view the image’s file size and other properties.
-
Safari: Ctrl-click on the image and select to save the image as a file or to view the image by itself in the browser.
-
Opera: Right-click on the image and select to save the image as a file, to view the image by itself in the browser, or 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. To view page info:
-
Internet Explorer: Right-click on the window and select .
-
Firefox: Right-click on the window and select .
-
Opera: Select | | Panels, check the checkbox, and click .
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.