The Elephants of HTML and CSS

HTML and CSS are the main building blocks of the Web. If you have been making Web pages with Dreamweaver or FrontPage, iWeb, WordPress or some other "what you see is what you get" page-design software, you may have been ignoring "the elephant in the room" -- the fact that HTML and CSS do not require any of those fancy programs.

http://en.wikipedia.org/wiki/File:Elephant_near_ndutu.jpg

Elephant near Ndutu, by Nick and Mel.

You can build pages full of color, images and interesting -- even magical -- layout using a plain text editor like Notepad for Windows, TextEdit on the Macintosh (or Pico, Vim or Emacs on a Unix computer) and a folder full of pictures. And by understanding HTML and CSS, you can do some things with a text editor more quickly than you can with a page layout program. At the very least, you will be able to read the HTML and CSS created by Dreamweaver and other "power tools," and make quick edits when needed.

Quick definition: HTML is a free international standard for marking up pages of text to indicate their internal structure and their relationship to other pages. Another word for that relationship is "linkage," or "hypertext." In fact, HTML stands for HyperText Mark-up Language.

Web browsers like Firefox, Safari, Opera and Internet Explorer interpret HTML markup to put pages on your screen more-or-less the way the author intended. Individual browser manufacturers' interpretation of the HTML standard can vary, so it's important to test your pages on a variety of browsers. Back when it had the clear lead in the browser market, Internet Explorer was notorious for doing things its own way.

CSS is another markup language, one that allows you more control of the visual appearance or formatting of pages. So remember: HTML for "structure and linkage"; CSS for "looks." You'll learn more about that distinction when you get to the first CSS tutorials.

We'll leave a few other elephants waiting in the wings: JavaScript, PHP, MySQL and Flash. They are scripting, programming, database and graphical-animation systems that add action, interactivity and automated tasks to HTML pages.

But HTML and CSS should be your first elephants. Coincidentally, you start by learning their smallest parts, or "elements." (Feel free to tell your friends that you are studying the elements of elephants on the Web.)

HTML Elements

Start-tags, attributes, contents and end-tags

For example, I made the headline for this page using an HTML tag called <h1> -- "h" for "heading" and the number one to indicate that it is the main heading of the page. By default, browsers set the heading tags apart on a line of their own and in larger type than the rest of the page -- the lower the "h" number, the larger the type.

I added optional "style" attributes to that headline to make it a different typeface and color. Then I typed the "contents" of the element, the words "The Elephants of HTML and CSS." Finally, I "closed" the heading tag by repeating it with a slash mark: </h1>

There are plenty of HTML tags, but you can build full sites with about a dozen: Four tags to establish the behind-the-scenes framework of the page, then tags for paragraphs, headings, strong or emphasized text, and a few others to define bulleted or numbered lists and insert images. Another powerful tag allows you to break your page into box-like divisions larger than a paragraph, which you can "style" in many ways.

Here they all are:


<html><head><title></title></head><body>
<div><h1></h1><p><em></em><strong></strong></p>
<h2></h2><ul><li></li><li></li></ul>
<ol><li></li><li></li></ol></div></body></html>

All you need to do is add some content:

<html><head><title> PAGE TITLE GOES HERE </title></head><body><div><h1>HEADLINE HERE</h1> <p><em> WORDS TO EMPHASIZE</em> or <strong>MAKE STRONG</strong> ALL IN A PARAGRAPH. </p> <h2>SUBHEAD HERE </h2> <ul><li> LIST ITEM </li><li> LIST ITEM </li></ul> <ol><li> LIST ITEM </li><li> LIST ITEM </li></ol></div></body></html>

In class, you can copy and paste those lines of code into an editor, add some blank lines and words of your own, and load the page into a browser to see how the pairs of tags work.

You also can start here, with the first tags explained on one page: DayOne: Your First Dozen HTML Tags

What about "doctype"? Up until now, I've left out one important line on purpose: The very first. As you proceed to making serious Web pages, you must inform the browsers which version of HTML you are using.

As explained in the textbook, the Web community has tried to simplify matters with the latest edition of HTML, called "HTML 5", which has a very short "document type declaration," unlike the last couple of versions. For HTML 5 documents, which are all we will be doing in this class, add this line to the top of every document, even before the <html> tag. The doctype is technically not an html tag, it is a statement to any program opening the document. Unlike your html tags, the word doctype should be all upper-case:
<!DOCTYPE html>

For comparison, here's an earlier DOCTYPE declaration:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

CSS Elements

CSS, or Cascading Style Sheets, are a way to organize the "style" attributes of HTML elements. For the first few years of the Web, designers tried to make HTML handle both the structuring and the visual appearance of pages. The result was pages that didn't translate well to new media. With CSS, it's easy to make one version of a page for computer displays, another to send to a printer, and another to send to a smartphone. That's because you can literally separate the CSS from the page.

Instead of inserting style attributes for individual headings, paragraphs or divisions (the way I did with the elephant picture), you can put all of the style settings for a page in one place, or make one set of style rules apply to dozens of pages.

Each style rule selects an element, identifies its properties, and sets values for them. For instance, the style rule for that headline at the top of the page selects the <h1> heading and sets values for its "font-family" property, its "color" property and "background-color."

Peeking Encouraged

Deep secret: You can view the source code of any page you visit, although today's browsers don't make it as easy as older ones, which had "View Source" right there on a main menu. For example, today Apple's Safari browser requires you to open its Preferences menu, select "Advanced" and then select "Show 'Develop' menu in menu bar." Once you've done that, "Show Page Source" is under the "Develop" heading on the main menu. (Command-Option-U is the keyboard shortcut.) In recent versions of Firefox, CTRL-U on Windows or Command-U on a Mac will do the trick.

Where to Learn

For Fall 2011, I found a new book that is up-to-date and well structured: Basics of Web Design - HTML5 and CSS3.

For years, I recommended that students start with a couple of HTML books, then I added the tutorials at w3schools.com, which are great. But even those may be more detailed than some students need.

Some beginners prefer to get started using the shorter HTML and CSS lessons at HTML.net

I especially like the fact that the HTML intro there is brief, and shows where to find the Windows Notepad application (similar to the TextEdit Macintosh program in our Mac lab, but needing less setup). It covers the basics of HTML in 15 five-or-10-minute lessons before tackling CSS. As things get trickier, you can supplement it with the similar lessons -- and active-code demonstrations -- at w3schools.