Puss Reboots: Tutorial: An Introduction to HTML

In this tutorial I will introduce some key concepts for basic HTML construction and web page design. Of course with CSS (Cascading Style Sheets) and other programming languages, a lot of the things covered here will seem rather plain and simplistic. Nonetheless these are concepts that help to form a solid foundation for good web design.

A web page is made up of content, links, images and maybe some imbedded content. The glue that binds these elements together is HTML (hyper-text mark-up language). There are three ways of generating HTML

For this tutorial, let's leave option #3 for the experts. That leaves text editing and the wysiwyg editor.

Two respected text editors are Homesite (PC only) and BBEdit (Mac Only). Homesite was recently purchased by Macromedia (and does come bundled with Dreamweaver), so I'm not sure if it will still be available as a stand alone. Bare Bones Software, the makers of BBEdit offer a free version, BBEdit light which can be downloaded from their site.

Other text editing options are Note Pad (PC), Simple Text (Mac) or a word processor. Note Pad's disadvantage is that the UI is clunky. Keyboard short cuts don't work which cuts down on the efficiency of typing. Likewise, Simple Text has a size limit of 32K. Most new word processors have the bad habit of trying to parse HTML but this can be turned off.

If you don't trust your coding skills or want to save some time, there are the wysiwyg (what-you-see-is-what-you-get) editors. Two editors mentioned most are Microsoft Frontpage and Macromedia's Dreamweaver. Frontpage (to be discontinued later in 2006) comes with a bunch of themes which can help crank out a coordinated site but it's notorious for generating bloated code. Dreamweaver generates leaner code than Frontpage and can find missing tags. Unfortunately it also has the bad habit of losing tags and inserting line breaks into javascript that can cause errors.

Even if you don't plan on doing much hand coding, it's still important to know some HTML basics. For instance, the most simple web page must consist of this:

And of course, your text file must be saved as a .html (or .htm if you're running on a system that still only uses 8.3 naming convention). Remember, Mac users, you too must include a .html at the end of your files for the browsers to know it's a web page.

For the purpose of this tutorial I'll leave the <HEAD>. uses alone as it is really a tutorial in itself.

Anything in between the <BODY> and </BODY> tags will render in the web browser when the page is loaded. If nothing but text is typed in between those tags, what you will see is a long stream of times-roman text of approximately 10 pt in size on a gray background. You won't have any line breaks, paragraphs, indentations or other stylistic changes and though your prose maybe very informative and interesting it will be ugly.

Note: that is not to say I'm for huge graphically intensive sites. You should strive for a balance between layout and flexibility. What you see on your machine isn't what every visitor to your site will see.

Formatting Text:
Text can be formatted as headers (which is different from the head tag), paragraphs and separated by line breaks and horizontal lines. With the advent of the font class, the header is rarely used any more. It is designed to work like a newspaper headline, making text that is larger and heavier than the default text size. The largest size heading is set by <H1> </H1> and they go down in size from there. The heading isn't used much, in my opinion, is because it gives two line breaks after the text contained between the opening and closing tags. As most professional web sites are designed with a strict layout or UI that extra line of space is more of a nuisance than a help.

Header 1

Header 2

Header 3

The two most popular ways of formatting text are the paragraph <P> and the line break <BR>. Like the header, the paragraph has two line breaks associated with it to separate blocks of text. In this case, though, the extra line provides an important visual cue to readers to see the breaks between ideas.

The line break <BR> moves text or images to the next line but doesn't provide any white space between the lines. The spacing is like that of single spacing done in a word processor or on a typewriter.

Links:
The "HT" in HTML stands for hyper-text. The element that makes web pages hyper-text is the ability to link to other pages. Links are easy to create. At the start of the word that should be linked, add a <A HREF="yourlink.html">, then put the word and after that word (or words) put a closing </A>. This type of tag is called an "anchor" tag.

There are two types of links: absolute and relative. An absolute link includes the entire web address for the link, example: http://www.pussreboots.pair.com/tutorial/. Use absolute links anytime you are linking to a page that is not part of your website. Relative links look like this ../tutorial/ and can be used when linking to other pages you have created and sit on the same web site as the page doing the linking.

Lists:
If you need a list or a set of bullet points, the easiest way to do that is to use the <UL></UL> tags. The list is started with a <UL> and then each new list item is started with an <LI>. Modern conventions (XHTML and its kin) require that the <LI> be closed with an </LI> when the line is finished but for HTML, it is acceptable to just start the next line with a new <LI> without closing the previous line. When the list is complete, close it off with </UL>

To make an ordered list, use the <OL> and </OL> tags instead of the <UL> and </UL> tags.

Note: Lists are something that can be beautifully styled with CSS. The indenting can be changed or removed, graphics used for the bullets, and all sorts of other things.

Tables:
Tables were one of the first additions to the HTML standard (as were images). Tables are now the most commonly used tool for controlling the layout and flow of content on web pages. Though the HTML 4 standard places the layout responsibility on cascading style sheets (CSS) most browsers (even the newest ones) aren't up to the task of properly rendering the more complex elements of CSS and older browsers (3.0 and earlier) can't parse CSS commands. Until CSS is more widely supported, the table will continue to be layout tool of choice.

As you can see, the table cells grow to fit the longest set of text. If you want greater control over the table you'll need to employ some extra Formatting

With the introduction of CSS, the need for using tables to control layout (something HTML is not really designed to do) is no longer the only option for getting a more consistent look to a page across browsers and platforms. CSS can and should be used for controlling the stylistic elements of web pages, though very few sites follow this rule completely. If you look at the source code for most pages on Puss Reboots, for instance, you will see a hybrid use of tables and CSS. For a true example of the power of CSS, please see the CSS Zen Garden.

Images:
Web pages can use three types of images (plus a variety of "imbedded media" which I will not cover in this tutorial): gif, jpg (or jpeg) and png. To include images in your page, use this tag: <IMG SRC="yourimage.gif">. Good image creation and usage will be covered in another tutorial.

Getting Pages Ready for the Web:
Your web page source code must be saved as a .html (or .htm if you're running on a system that still only uses 8.3 naming convention). Remember, Mac users, you too must include a .html at the end of your files for the browsers to know it's a web page.

For the purpose of this tutorial I'll leave the most of the <HEAD> uses alone as it is really a tutorial in itself. One piece of the header you should include is a title for your page. Page titles are created this way: <HEAD><TITLE>Your Title Here</TITLE></HEAD>

Anything in between the <BODY> and </BODY> tags will render in the web browser when the page is loaded. If nothing but text is typed in between those tags, what you will see is a long stream of times-roman text of approximately 10 pt in size on a gray background. You won't have any line breaks, paragraphs, indentations or other stylistic changes and, though your prose maybe very informative and interesting, it will be ugly.

Once a page is built, it can (and should) be tested locally. Open a browser and go to file, open file and find the page on your computer. Click OK and your page will load. You will probably see things that need changing and fixing. Go back to your text editor or WSYWYG, make the changes and test again. Once you are satisfied with what you see locally, it is time to FTP your page to your website.