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.
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 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.jg" />.
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>
What are the Basic Components of Web Pages?
A well-formed page has these top-level elements:
- <DOCTYPE>: a single declaration that is always the first line of an HTML file. There are 4 valid doctypes, depending on how stringently valid your HTML code is expected to be. By default, we'll be using the XHTML 1.0 Transitional doctype. If omitted, however, most browsers will assume the file is in the weakest form of HTML, which gives the most room for errors.
- <HTML>: this declaration wraps around everything else in the file after DOCTYPE.
- <HEAD> and </HEAD>: the HEAD section contains information about the page, as well as external files that are required (Javascript, CSS).
- <BODY> and </BODY>: the BODY section wraps around the content of the Web page that is actually available to viewers.
- </HTML>: this declaration at the end wraps around everything else in the HTML file.
Outline of Basic Web Page
<html>
. . . the HEAD content describes the page and its components, but says nothing about the content. . .
</head>
. . . the BODY section contains the actual visible content of the page . . .
</body>
Simple Web page with Common Elements (in XHTML)
<html>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Canonical Page v1</title>
<meta name="description" content="This is the class Web site for CIS86 in Fall 2007." />
<meta name="keywords" content="College of the Redwoods,CIS86,HTML,Web Page Design" />
<script type="text/JavaScript" language="javascript" src="CSS/CIS86.js"></script>
<link href="CSS/CIS86.css" rel="stylesheet" type="text/css" />
<link href="CSS/CIS86-Print.css" rel="stylesheet" type="text/css" media="print" />
<style type="text/css">
h2 { color:#0033ff; }
.highlight { background-color:#ffff66; }
</style>
<body>
<h2>This is a header for a simple page.</h2>
<div class="highlight" >
<img src="images/example.jpg" alt="This is an example image." />
<p style="font-weight:bold;" >This is a very Simple Page.</p>
</div>
</body>
</html>
Another View of the Same Thing
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.
- prototype.html : the default HTML file that includes both CSS and JS files
- 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"?
- The key is to look for the boxes that make up the sections of the page. You need to understand which pieces fit inside other pieces to understand how a page is laid out.
- In your browser, choose View Source to see the raw HTML. If you have the Web Developer Toolbar for Firefox, you can click on the View Source button.
- Use the Firefox extension View Source Chart, which shows you the code as a series of nested boxes. This allows you to easily pick out the structure of things. This is one of my favorite tools....
- Use the Web Developer Toolbar's inspector to view specific elements on a page.
- Open up the Firefox DOM Inspector: 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.