html 101

Starting an HTML Document

While the content inside most tags is displayed on-screen, some is not. For starters, every HTML document must include some "meta" information at the top – information about the page itself that is critical to the web browser, but not shown to the reader.

Let's create a Web page that has the tags you will always need to include, along with some of the other more common tags and attributes used to design a page.

Note: The "meta" information described in this section is generally inserted for you automatically when you use an advanced HTML editor such as Dreamweaver or TextMate. However, we cover it here because you may be using a simple text editor such as Notepad or TextEdit that doesn't insert the meta information for you. Also, it's important to do it manually just once, so you know what's going on.

First, launch your text editor and and create a new, blank document (File | New).

We need to tell the browser that this is an HTML document. At the top of your blank text page type:

Press the Return or Enter key on your keyboard a few times to give yourself some breathing room, then add the closing HTML tag:

Everything else you do in this document will be "nested" between these two "container" tags, so put your cursor somewhere between the two tags.

Note: HTML is "whitespace-agnostic" – that means it ignores all line breaks, tabs, and series of spaces you enter. To add specific formatting to your document, you'll need to use HTML tags. For example, you can put one hard return or 100 hard returns between your paragraphs, and it won't matter a bit – all that matters is that you surround your paragraphs with



Tip: Remember to close every tag! Failure to close tags properly can lead to confusing problems down the line.

Page Header

To continue creating the HTML "skeleton" of your document, we will create a "header" section by entering this code:

Nothing inside the "head" container tag will be displayed to the user. Later, as you learn more, you will use this section to define document properties, include external JavaScript and CSS files, add document keywords, and more. For now, within the head section, enter a title for your page, surrounded by opening and closing title tags. Your document should now look like this:

The title is not displayed on the page, but it will show up in the very top bar of a Web browser window. More importantly, the document title becomes the name by which your page will be bookmarked, and also the name search engines will use to refer to your site. Don't forget to add a unique title tag to every page of your site. For example, these might be the titles for three pages of your site:

Joe's Donuts - Home Joe's Donuts - About Joe's Donuts – Products

That way your pages will stand out as distinct entries in search engine results and in people's bookmarks.

The Page Body

The next critical tag in your document is the "body" tag. Everything that comes between the opening and closing tags will be displayed to the user. Put your cursor at the end of the tag and hit Return a couple of times, then type:

At the end of your document, but before the closing tag, you need the closing body tag:

Now go ahead and put a simple paragraph with a bit of formatting information in between the two body tags. At this point, your document should look something like this:

Now, let's give our page a background color. Because we want to style the entire body section of the page, we're going to put some attributes on the tag:

"Beige" is nice and friendly, but most of the time, you won't be referring to colors by their friendly names - there are only 150 of them, and most of the time you'll want more nuance than that. More commonly, you'll see HTML/CSS colors referenced by hexadecimal values, like this:

Looks hairy? Don't worry about it. There are tons of online tools (such as this one) that will help you find hexadecimal color values easily. In addition, the color picking tools in Photoshop, Flash, Dreamweaver, and virtually any tool that deals with the web will let you copy and paste hexadecimal color values – this lets you easily match background colors to image colors, for example.

Color picker

There are many HTML "hexadecimal" color pickers available – some on the web, others as desktop applications, others built into common multimedia applications and text editors. Pictured: