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.
To continue creating the HTML "skeleton" of your document, we will create a "header" section by entering this code:
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 thetag 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.
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: colorblender.com.