Teaching HTML
.Monika recently mentioned that she wanted to learn HTML, and Brian has similar intentions, prompting me to wonder how I would teach HTML at this point. I’ve taught it before, but not for quite some time, and I think my approach would be different now.
This is the approach I think I would follow:
Essential Tools
First off, emphasize that all you really need to start are:
Firefox
A text editor
Recommended are the Firebug and HTMLValidator extensions for Firefox; these are near-essential for how I do web development.
For an editor I recommend jEdit, although Mac users might prefer Smultron (which I’ve never used, but which looks good).
Core Structure
The very basic core structure of HTML and XHTML documents:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
</head>
<body>
<p>change me</p>
</body>
</html>
and
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Title</title>
</head>
<body>
<p>change me</p>
</body>
</html>
Briefly, this covers the foundations of any HTML document, and what goes into head rather than body.
Elements and Semantic Meaning
The discussion of head versus body is a springboard to go on to underlining semantic meaning of elements as being the basis of how HTML works, and that the tag should match its content closely. Some mention about how semantic meaning makes styling easier, and some mention of how it can’t really do any harm and can do plenty of good further down the line.
The “M” in HTML stands for “markup”, not for “design” or “layout”. Markup is an attempt to deal with what things are, not what they should look like or where they should be.
Early Experimentation
Encourage experimentation with the documents, and push the workflow of saving in the editor and refreshing the browser to see the changes—and ensuring that the people I’m teaching learn how to do this quickly, since they’ll do it thousands of times if they end up writing HTML for any length of time. Ctrl-S Alt-Tab Ctrl-R or Command-S Command-Tab Command-R—either way they’d do well to become adept at those key sequences.
An explanation of the filesystem, if necessary, goes here.
Information/Display/Behavior, AKA HTML/CSS/Javascript
These three should be separated as much as possible, including separation of files. This is critical to an introduction of how to make documents look a certain way, which is also critical to put out there before introducing assets and how they’re linked to from the HTML file.
The “H” is for hypertext, and that means the ability to reference things that are not contained within the file. Other assets may be included, and those assets provide the core semantic structure with a “look” and with behavior, as well as with other objects such as images.
Assets and Linking
This section includes the brief but important introduction to element attributes.
Assets first, including img, link, and script, which were hinted at in the previous section. Some more experimentation here, so get people used to how linking works, and the difference between absolute, relative, and local references.
Then linking, including the creation of new HTML files and linking between them, and a long practical experimentation period.
The Document Object Model
Returning to semantic meaning and document structure, a discussion of the DOM and how it works, probably illustrated using the “inspect” view in Firebug. Important here is how well-formedness is critical to software’s ability to understand what elements are being referenced, and how a rational document structure makes display and behavioral changes much, much easier.
This discussion also includes the introduction of the id and class attributes.
Basic CSS
An introduction to CSS, probably accompanied by live editing in Firebug, and by element-level style definitions in a CSS file, including a longer discussion of the link element.
I’m not sure how long all of that would take, but this point seems like a reasonable break before starting to put the various elements together in more complex ways. that seems like a solid beginning to me. Some other topics to cover include how web servers and browsers actually work in terms of page requests, how to structure the local filesystem for assets, online references (including the specification documents), and code validity/validation.