How to Read HTML Pages
What does An HTML Page Look Like?
HTML files are just text files, and they can be edited with any text editor. This is deceptively simple, because your results will be unpredictable unless you actually have some idea of what you are doing. Armed with some knowledge, however, you can effectively create and maintain Web sites with free software.
Even though HTML tags appear in plain text, they use a very specific syntax to accomplish their functions. For beginners, more errors come from mistyping than from errors of understanding.
Every HTML tag starts with "<", and ends with ">". HTML tags come in pairs, with only a few exceptions.
Paired tags always appear like this: <table> will eventually be followed by </table>, although you may find many other tags between the starting tag and the ending tag for any given pair. Tags that appear within the scope of another tag have a parent-child relationship that can be exploited in CSS. Not only can you apply styling to a DIV (box) and to a paragraph, you can also apply styling to paragraphs that occur inside certain DIVs – this is a very powerful technique.
These HTML tags do not require an ending tag: br, img, input, link, doctype, and meta. If you are using XHTML instead of HTML, then you will have to self-close the tag with a slash inside the tag, such as with images:
<img href="pretty-picture.jpg" />.
Tags are hierarchically nested. You can easily chart out a page to discover problems with nesting – draw arcs on the printed page to connect pairs of tags. If your arcs overlap, then you have a problem. This is correct:
<strong><em>Example</em></strong>
whereas this is not correctly nested:
<strong><em>Example</strong></em>
Comments in HTML look like this:
<!--This is a terminated (single-line only) comment in an HTML file.-->
Comments inside a CSS style block within an HTML file look like this:
/* This is a terminated comment in a CSS file or a Javascript file. The comment
can span multiple lines. */
DFF’s Canonical HTML/CSS/JS Files
These 3 files provide a good starting point for developing Web pages. The HTML file has all of the common HEAD tags in place, including statements that read in a CSS style sheet (2 versions, where the second can tailor the output for printing) and a Javascript file. It also shows how to define styling and scripts in the HEAD section of the HTML file. The BODY content is just sample code that can be tossed. The style sheet contains several useful things, including: default settings for standard HTML tags (to standardize behavior or appearance) and some debugging classes you may find handy.
- Canonical-Page.html : the default HTML file that includes both CSS and JS files
- Canonical-Page-Short.html : the short form of the default HTML file
- Default-Styles.css : the style sheet for the default HTML file
- Default-JS.js : a default Javascript file
How Can You See "Beneath the Covers" of a Page?
- Use the CSS Viewer to outline items as you move the mouse around over a page.
- Use the Web Developer Toolbar’s inspector to view specific elements on a page. Type Control-Shift-F (on a PC), and then click on page elements to get a popup box with relevant info. Type Control-Shift-Y to see the DOM tree for the element, as well as a summation of all styling applied to the selected element.
- In your browser, choose View > Page Source to see the raw HTML. If you have the Web Developer Toolbar for Firefox, you can click on the View Source button on the toolbar.
- In the browser, choose Tools > View Source Chart to see a collapsible outline view of the HTML source.
- Open up the Firefox DOM Inspector, using Tools > DOM Inspector. This shows you an expandable outline view of a Web page.
- Open up the FireBug debugger window to inspect the HTML, CSS, Javascript, and DOM settings for the site, including a hierarchical view of the page elements in the DOM.
- The Colorzilla add-on, besides being a great way to examine color in a site, contains a DOM Inspector. Right-click on the Eyedropper icon, and then choose Webpage DOM Color Analyer to see all of the colors in use on the page, and where they are defined.