Home > HTML > Here

Basics of HTML
Version 4.5 - September 2, 2006
Hold mouse here for list of most recent changes.
Receive notice whenever this page is updated.

Sample Basic HTML Document

A Web page (in the most common sense, and in the sense used on this page) is generated from an HTML document. An HTML document is an ASCII plaintext file — something created with a simple text-editing tool such as Notepad, or by another program that does this for you. Instead of ending in .TXT, the filename should end in .HTM or .HTML. The “magic” that makes it work is built into a web browser, which is really an HTML file viewer. You have to put certain things in the HTML document if you want the browser to display it correctly.

Historically, different browsers have rendered HTML code differently. Leading browsers are moving ever closer to conformity on this issue — at least, for the most used features on a web page — because the browser makers are choosing to conform to international standards. At the present, though, we still have to deal with the reality that some browsers have serious deficiencies in their conformity to standards (especially older browsers, such as Netscape versions before 4.79, and some non-mainstream browsers). Just remember that the “magic” is in the browser itself; you just have to put the right things in your page to make the browser do its magic right. The more you stay with basic, common HTML commands, the more likely your pages will appear the way you want them to appear on the widest range of browsers. Try to be mainstream. Be creative with your web page, more than with your coding!

I recommend that you make a small document-starter text file, such as the following, that has all of the basics you want in any HTML document:

<html>
<head>
<title>@</title>
</head>

<body>
@
</body>
</html>

Tags & Attributes

The primary HTML commands are called tags. Most HTML tags come in pairs, to mark the beginning and end of a tag’s effect. For example, to turn text bold you place  where you want the bold to start, and  where you want the bold to stop. Closing tags are always identical to the opening tags, but with the addition of the / character as you can see in the samples.

Within individual tags may be other HTML commands called attributes. These, when used, further specify or specialize the behavior of the particular tag, and are in the form of attributename="content". EXAMPLE: A paragraph can be centered by adding an ALIGN attribute to the paragraph’s  tag, in the form .

HINT: HTML 4 rules are lax concerning whether or not an attribute’s value needs to be within quotation marks. The general rule is that, if it doesn’t contain a space, you don’t need the quotation marks. However, I recommend you always use quotation marks with attribute values because they are required in “next-generation HTML” (called XHTML).

The HTML tag (<html>) begins the entire document. The /HTML tag (</html>) ends it. Between these are two primary sections, the HEAD and the BODY (bracketed by opening and closing tags for each). Within the HEAD, the TITLE tags name your page: They indicate the text that will appear in the browser’s title bar and on a Windows taskbar button for the open page. Everything else goes in the BODY — it’s literally the body of your web page, what appears on the displayed page itself. If you just start typing a bunch of text between the opening and closing BODY tags, that’s what will appear on your page. Of course, it won’t be formatted even with line breaks until you add formatting tags — but we’ll get to that below. As a sample, just type something in the BODY of the sample document, save it as a file with an .HTM file extension, then click on it to open the file in your browser.

NOTE: I have an old habit of using the @ sign as a dummy character to tell me where I want to type something.

A slightly more elaborate variation of the doc-starter file, closer to what I use for my particular needs, is as follows. (HINT: Truth be told, I no longer use this document-starter file. Instead, I usually just rob one of my existing pages, gut it, and go forward. But until you have a selection of pages built up, this doc-starter file is quite valuable as a time-and-effort saver.)

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>@</title>
<link rel="stylesheet" type="text/css" href="vellum.css">
<style type="text/css"></style>
</head>

<body>
@
</body>
</html>

The LINK tag points to the Cascading Style Sheet (CSS) file that I use to define formatting styles for the page (your actual filename goes where I have typed vellum.css above). The STYLE tags provide an alternative place to define formatting styles. For further information on this, please read the brief introductory remarks on styles below.

NOTE: The  within the style tags mark comments. Ignore their use here for now, until the STYLE tag is discussed on the (eventually) forthcoming “Basics of CSS” page.

The DOCTYPE line specifies the version of HTML you are using. It’s valuable when you use validator web sites to check whether you have valid HTML code throughout your document. Most browsers also will use this information to guide them in how to render your code. I recommend that people beginning to learn HTML use “4.01 Transitional” in DOCTYPE declarations. “HTML 4.01 Transitional” is most likely to be consistent with the mix of traditional HTML forms and emerging CSS forms you will be learning and applying at the present. When you’re ready to be a purist (sometime after you know how to use styles), drop the “Transitional” and validate against strict HTML 4.01 for any pages that do not involve frameset elements. For frameset pages, validate against “HTML 4.01 Frameset”.

A more complete DOCTYPE declaration also specifies a URL where the particulars of the specified version can be found. In theory, this expanded form is recommended. The problem is, no current leading browser exactly fulfills any existing standard, and using the more complete version declaration will cause browsers to wrongly render some pages, at least in small ways. For example, with a full version declaration, Internet Explorer will wrongly render any page with a vertical scroll bar, forcing a horizontal scroll bar also to be present, and text to go slightly off the right edge of the screen. In any case, just so you have access to the information, here are the full and correct DOCTYPE declarations, researched by the good people at aListApart.com:

For HTML 4.01 Transitional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
For HTML 4.01 Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
For HTML 4.01 Frameset:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

What Software Should I Use To Create Web Pages?

That’s up to you, of course. But you probably wouldn’t be reading this page unless you wanted my opinion, so here it is: Your very best web page designing experience, your fastest learning curve, and your greatest ease of updating and maintaining your pages in the future will come if you use two particular pieces of software: Notepad to do all composition, and your favorite browser to do all viewing.

Yeah. That’s it. As far as I’m concerned, forget FrontPage, Dreamweaver, and all the rest. Just use the Notepad that is standard in every version of Microsoft Windows, or a Notepad substitute, to do all your page composing. Keep the page you’re working on open in your browser to view what you are creating. When you have typed some content or modified some formatting and want to see the result, save your work (Ctrl+S is the fastest way), click over to the open browser (using the taskbar button), and refresh the page (on IE, just press F5). It’s very fast, very efficient, and much more satisfying.

Actually, I want to modify the above just slightly. I use a Notepad substitute called EditPad. Like many excellent Notepad substitutes, it doesn’t have some of the limitations of the basic program that comes with Windows. What I like about EditPad is that it allows multiple documents to be open with convenient tabs for quickly switching between them. In web page design and editing, I almost always have multiple documents open, either because I am updating related pages, or because I’m lifting content from one page to use in another, or for some similar reason. EditPad makes this delightfully simple.

Of course, feel free not to take my advice, and use whatever you want. I began with VisualPage, which came free with one version of Norton Utilities. But, in the long run, life got enormously simpler when I actually learned HTML and dropped all composing software whatsoever, other than EditPad for coding and my browser for viewing.

NOTE: With rare exception, HTML code is not case sensitive. That is, it doesn’t matter whether you use uppercase (e.g., <HEAD>) or lowercase (e.g., <head>) letters. Historically, uppercase letters were recommended to more easily differentiate HTML code from the page content. However, with new post-HTML developments just around the corner that require all lowercase code (specifically XHTML, which for all intents and purposes is HTML Ver. 5, and integrates HTML with XML), W3C has changed its recommendations in HTML 4.x, and advises using all lowercase for HTML. I echo their advice, for the same reason. If you’re just learning, learn it in lowercase now. If you’ve been doing this a while and in uppercase, start converting your pages over, and start getting those reflexes in your typing fingers reconditioned.

Styles: A Very Brief Introduction

This section is not necessary to your INTRODUCTORY instruction in HTML. It might confuse. Therefore, if you don’t already know basic HTML coding, you may want to skip this section until you’ve taken in the rest of the content of the present page. Just know that the occasional Styles box that appears up and down the page refers to coding approaches touched lightly upon in this present section.

To summarize a huge topic in as few lines as possible, styles are very powerful formatting definitions. They provide a way to more efficiently control and manage the formatting of your pages. Their main purpose is to allow you to separate the content of your documents from the style or format in which it is presented. For most begining and intermediate HTML students, the most obvious advantages are that styles permit you to create a uniform appearance to many or all web pages across your site, and allow you to modify this formatting with very little effort. For end-users, though, the scope of this innovation can be huge, including the fact that sophisticated use of styles can make your web pages even independent of the medium of a web browser, and make it equally accessible to hand-held devices, voice readers for the deaf, Braille writers for the blind, and innmerable other devices not yet conceived.

Styles may be either:

placed in STYLE= attributes immediately next to certain text on your page (to affect that text), e.g. “I can make bold words change color or make other text deep red” is produced by this code: I can make bold words change color or make other text deep red;
placed between style tags in the HEAD of your page (to affect the entire page);
externalized to a .CSS file and called from within your page document (see above) — to affect every page on your site that references it.

In the first method of these three, two examples show the basic approach. In the first of its examples, the strong tag (used to make text bold) was modified to carry the characteristic of a color change. As used here, it affects only this one strong tag, not all of them. To affect all strong tags throughout the entire document, you would use the second method given above: Between opening and closing style tags in the HEAD portion of your document, you would add the following line:

strong {color : green;}

To make all bold text throughout your entire site green, you would paste the line just given into a separate .CSS document and call the style document from each page of your site. HINT: While learning the rudiments of cascading style sheets, you will find many occasions to apply styles locally as in method 1 above. Though it is theoretically better to design your site well from the beginning, with lots of forethought, we don’t always find ourselves in the ideal situation. One useful and common way to start converting HTML pages to the use of styles is the “roll it up and out” method: (1) Apply styles locally, to specific text. (2) When you have used it two or three times in the same document, or decided to make it standard for the entire page, roll it up into the HEAD of the document. (3) When you have used it in two or three documents, roll it out to an external style sheet. To use this “up and out” method freely you also need to know about classes, which are not covered on the present page.

In the first example above, note also two different approaches to using the style attribute. In the first example, we use it to modify the strong tag. We already know that you want the text bold or “strong,” but we’ve now added further information that the color should be green. In the second example, though, we didn’t already have a tag in place — we just wanted to change color. Therefore, we used the span tag. Opening and closing span tags are used for no real purpose at all except to change the style of text embedded within a paragraph or similar structure. That is, it doesn’t force a line break, but simply modifies the text inline. The companion of span is div. Div works just like span except that it forces a linebreak immediately before it begins and after it ends. Div is used to mark off divisions or discrete sections of your document. Both span and div have much more sophisticated uses than are described in this very brief introduction.

Learning and applying styles is the next step for you after learning and applying basic HTML. Styles are basic to the current HTML 4 standard, and to post-HTML technologies. However, beyond these few remarks and an occasional tip below (usually in special set-aside boxes created using the div tag), little else about Cascading Style Sheets, the style tag, or the style= attribute will be discussed in this “Basics of HTML” page. A “Basics of Cascading Style Sheets” page is planned for the future.

Formatting Text

First, here is some advice that may save you from a lot of frustration: web page design is not desk top publishing. It isn’t like typesetting on a piece of paper. Specifically, you, the creator, do not have ultimate control over how your page is viewed. A thousand people viewing it may see it in hundreds of different ways. This is because differences of browsers, monitors, user settings, and other factors can significantly affect how the page appears. Different web browsers render HTML somewhat differently, even for basic code. (Look at the present page in Internet Explorer and Netscape and, at the very least, you will see the text in different sizes.) The size of a monitor (or even whether a browser window is maximized, and how it is sized) determines the width of the viewing area. Screen resolution, of course, affects the display. Users may configure their browsers to ignore much of the formatting of a particular page and use the viewer’s font and color choices instead of the ones you have picked. You must understand, therefore, that there are limits to what you can do in exact formatting. Get things in the general way you want them, then turn the page lose for the world to view as it will.

In the BODY of your document, type any text you want. If you do nothing else, it will have no format (not even line breaks). For this, you need formatting tags. Almost all formatting tags have an opening and closing tag; for example, as mentioned earlier, to turn text bold you place  where you want the bold to start, and  where you want the bold to stop. Closing tags are always identical to the opening tags, but with the addition of the / character as you can see in the samples. The most commonly used exception to the open-close rule is the break tag,  , which forces a line break. I will list open-close tag pairs below with ellipses (...) between them to imply that formatted text goes between them.

HINT: I picked up a good habit from watching experienced HTML coders. Since it might not be obvious, I thought I’d pass it along here. It helps you overcome the common mistake of forgetting to close your tags. The trick is to type the opening and closing tags together, then backspace and fill in the content. (Most people probably type the opening tag, type the content, then either do or don’t remember to type the closing tag.) For example, if you mean to type This is a paragraph, type the  part first, then backspace and fill in the This is a paragraph part. Terribly simple... but also very helpful.

ANOTHER HINT: Next-generation HTML (i.e., XHTML) requires that all tags be closed, without exception. So what does one do with tags such as   that don’t have a separate closing tag? You have to close them internally by placing a space and then a / before the closing > character. Thus, the break tag becomes   instead of the simpler  . You can start using this form in HTML now if you wish (I will be recommending it below), so you will have less converting to do later.

 ... 
PARAGRAPH tags. The paragraph element forms the basic structure of most web pages. The main thing it does is to isolate text with two line breaks above and below it (the way a non-indented paragraph would look — like pretty much everything on this page). There are also other advantages detailed later, especially the fact that you can easily add style (formatting) details to the entire paragraph or class of paragraphs. At the beginning, just remember: Put your paragraphs within  ...  tags rather then just force the appearance with line breaks. And don’t forget to close the paragraph tag! (You can get away with not closing it in basic HTML, but not when you start using styles, and not in XHTML.)


ALIGN attribute in PARAGRAPH tags. Use either “left,” “right,” or “center” between the quotation marks to designate whether a paragraph is flushed left, flushed right, or centered on the page. (The default is “left.”) This is used for many things other than text paragraphs. For example, it is one way to determine horizontal positioning of an image on a page.

STYLES HINT: Although the align= attribute can be very much your friend right now, it isn’t ideal once you start using styles. (It’s a feature that’s on its way out, with the advent of styles.) Go ahead and use it now if you want — it’s easy, correct, and gets you thinking in the right way instead of using the old <center> tags. Also, conversion to styles later on requires only one very easy global find-and-replace. However, if you want to use the better form — the form you will have to use in the future — it is , again using either “left,” “right,” or “center” to designate whether a paragraph is flushed left, flushed right, or centered on the page.

  or  
BREAK tag. Forces a single line break. Compare this to the  tag which offsets text with double-spacing, which in most cases is the equivalent of two   tags before and after the paragraph. Don’t use   when something else does the job better! Sometimes, though, this is exactly the right tool, primarily when you don’t want double-spacing between lines, or when you want to supplement with additional spaces between elements. EXAMPLE: The line of text above this paragraph is separated from it by a   tag because I don’t want double-spacing between it and the body of the paragraph.

HINT: The newer form   is recommended instead of the older form  . You can use either in HTML 4, but the newer form will be required in next-generation HTML. This is because all tags have to be closed in next-generation HTML and, since the   tag doesn’t have a separate closing companion, it must be made self-closing by the addition of a space and / before the >. REPEAT: You can use either one now... but why not learn it the best way from the start, eh?

HISTORIC NOTE: There was a NO-BREAK tag ( ... ) in earlier versions of HTML. It is no longer supported in HTML 4. Its purpose was to prevent text from breaking (word-wrapping) to a new line. Instead, the contained text would continue on to the right until  was ended. There is no exact equivalent in current HTML standards but, for the most part, you can get the same effect by using a no-break space code   in place of the spaces in the text that you want to stay on the same line. (Current browsers still support the older, depricated  tag,)

 ...  or  ... 
BOLD and STRONG tags. Text within BOLD tags is displayed as bold. Text within STRONG tags is usually displayed as bold, but this is really left up to the browser and it might be rendered a different way.

Which should you use? Well, though it usually makes no difference (since all current major browsers render them the same), each has good arguments for its use. BOLD tags are shorter, and therefore are not only easier to type, but also somewhat reduce the size of your HTML files (fewer keystrokes). Also, HTML composing software generally will use BOLD tags, rather than STRONG.

On the other hand, there are some definite advantages of using STRONG tags instead. The pendulum is swinging toward their use because they are much more flexible when web pages are converted to other media. For example, devices meeting Federal accessibility standards such as a Braille writer or audio converter will understand , but will not understand . “Bold” has no meaning in audio conversion, but “strong” can be translated as “loud.” If you think there is ever a chance that someone might convert your web page into some other medium, or that the visually impaired may ever try to access your page by using some non-visual device, consider using STRONG tags. (If you are a Federal contractor, you have an even higher motivation to do so — if you want to get and keep the contract!)

In any case, pick one or the other and use it consistently, at least within a given page.

STYLES HINT: You can keep using the b or (preferably) strong tags once you start using styles. However, you should also know how to embolden text solely with styles, so that, e.g., you can add (or remove) a bold chararacteristic to some other attribute. The simplest way to do this is to include text-weight : bold or text-weight : normal (for non-bold) in your style definition.

HTML4 supports font-weight characteristics not only of normal and bold, but also gradiants of lighter and bolder. An older method still in use also allows numerical values from 100 to 900 (in increments of 100, so it’s not clear why they didn’t use 1 to 9!) to show gradiant changes in darkness. These variations will show depending on the browser that is being used and, more importantly, a given computer’s video card and color depth settings. Very often they make no difference at all!

EXAMPLES (try it with different browsers or on different computers):
This text is LIGHTER. This text is NORMAL. This text is BOLD. This text is BOLDER.

 ...  or  ... 
ITALICS or EMPHASIS tags. Text within ITALICS tags is displayed as italics.Text within EMPHASIS tags is usually displayed as italics, but this is really left up to the browser and it might be rendered a different way.

Which to use? The arguments are pretty much the same as for  and . Clearly  is more common at present, but  is making a comeback for the future. Pick one or the other, and use it consistently (at least within a given page). I’m choosing to migrate my sites in the direction of  and , and away from  and .

STYLES HINT: You can keep using the i or (preferably) em tags once you start using styles. However, you should also know how to italicize text solely with styles. The simplest way to do this is to include text-style : italic or text-style : normal (for non-italics) in your style definition. A third option available for text-style is oblique, which will slant the text to the right but not truly italicize it.

 ... 
UNDERLINE tags. Text within these tags is displayed as underlined. NOTE: This tag is deprecated in HTML 4, in favor of the use of styles. It still works, but is on the way out. (Too bad. It’s a simple, elegant, short tag!)

STYLES HINT: The STYLES approach to underlining is much less code-efficient than using the  ...  tags, but here it is:  ... 

To remove underlining where it would otherwise be expected (for example, in hyperlinks), set text-decoration : none.

HINT: These tags can be combined (nested) to produce composite effects. For example, Hi! will produce bold italic underlined text like this: Hi! It is good practice — and, if you want your code to pass the validator, it is essential! — that you follow proper “nesting” procedures, meaning that you “back out” in the reverse order of how you “came in.” In the example, we turned on bold, then italics, then underlining; but turned off underlining first, then italics, then bold. The  ...  tags are nested entirely within the bold and italics tags. The  ...  tags are nested entirely within the bold tags. This makes your code easier to read, and actually avoids problems in some obscure situations. Good coders nest properly!

 ... 
FONT tags. In standard HTML, the FONT tag is fundamental. You will use it quite a lot! It’s what permits you to change the typeface, size, and color of your text. I recommend that everyone learning HTML learn how to use this tag, and practice until you thoroughly understand it. Then, I recommend you look toward the day when you will remove it completely from your HTML coding by moving on to cascading style sheets. CSS, effectively used, has made the FONT tag completely obsolete in tight, efficient coding. Until you take that next step, though, this tag is one of your best friends. Put the opening and closing FONT tags around text that you want to modify. Add the FONT tag attributes listed below:


TYPEFACE attribute. Specify the typeface you want used. Only fonts that are installed on the visitor’s computer can be displayed! You can name several typefaces, separated by commas, and the browser will try to use each in turn until it finds one that is installed. In each case, end with a last-ditch generic option that will always work, such as serif, sans-serif, or courier. For example, in specifying Verdana as the default for a page, I might rank the options as Verdana, Arial, sans-serif.


TYPESIZE attribute. There are seven preset sizes, numbered from 1 to 7 with 1 the smallest. The default is 3; most viewing on today’s screens at the most common resolutions is size="2".


TEXT-COLOR attribute. Default text-color is black. You can use the FONT tags to change this. (If you want to change it for the entire document, use the TEXT= attribute in the BODY tag.) The text-color in the quotation marks can be either a six-digit hexadecimal RGB number preceded by #, or one of the special named colors recognized by the browser. See my Named Colors in HTML page for assistance in this. As the table will help you discern, the RGB code #da70d6 and the color name orchid produce the same color and either could be used in the color= attribute to produce the same effect. For lists of RGB codes for various colors, see the various tools and resources I list under HTML Tutorials & Resources.

<big> ... </big>
BIG TEXT tag. This makes text bigger than surrounding text.

 ... 
SMALL TEXT tag. This makes text smaller than surrounding text.

 ... ... 
SUPERSCRIPT and SUBSCRIPT tags. Text between these tag pairs is either treated as a ^superscript or as a _subscript). On most browsers, the text is not only moved above or below the baseline, but also is reduced in size. NOTE: Using these tags may alter the spacing between lines of text, much as if you had used a single larger-sized word in the middle of the line, because of how the superscripted text (for example) is moved above the baseline.

<blockquote> ... </blockquote>
BLOCKQUOTE tag. You’ll find this used a lot on my pages. It moves in the left and right margins. A common use (and the origin of its name) is when you want to include a large quoted block of text. It can be used for other formatting reasons as well.

EXAMPLE: This paragraph is positioned within <blockquote> tags. I often will use this technique for hints and notes, either for emphasis, to differentiate from the primary flow of the text on a page, or for other layout reasons. Right-click on this page, select “View Source,” and look for <blockquote> examples such as this present paragraph.

NOTE: Some HTML coders will say that anyone who still uses blockquote is a sloppy hack. However, it’s incredibly useful, and every browser I’ve seen that has come out since 1995 (or earlier) supports it just fine. Possibly future browsers will not support it, at which point we will need to replace it with something like <div style="margin-left : 5%; margin-right : 5%"> ... </div>. For now, I continue to use and recommend blockquote and still somehow manage to hold my head high <bg>.

<pre> ... </pre>
PREFORMATTED TEXT tags. This instructs the browser to pay attention to your line breaks, tabs, and spacing, and reproduce the text precisely the way you typed it in a fixed-width font (such as Courier). It does not, however, render HTML tags as literal text but, rather, interprets them as HTML tags. Because some of these can screw up the <pre> formatting, it’s usually a bad idea to use HTML tags (other than hyperlink anchors) in preformatted text. A WIDTH= attribute can be used in <pre> tags to specify the maximum line-width the browser will use. (Browsers will adjust the font and indentation in response to this, if necessary.) For example, to force a maximum line-width of 20 characters, use <pre width="20">.

Formatting the Page

<body background="filename">
BACKGROUND attribute to the BODY tag. Note that filename is used above as a variable. When using it, substitute the actual file path and name between the quotation marks. This specifies the graphics file that is to be the background image for the page. If (as often will be the case), the image is too small to fill the entire page, it will repeat itself by tiling. (This can save a lot on page load time because only a small image file has to be uploaded. The visitor’s browser does the rest.)

<body bgcolor="color">
BACKGROUND COLOR attribute to the BODY tag. If, instead of a background image, you want a background color, use this attribute. As with the color= attribute of the font tag, the color in the quotation marks in the bgcolor= attribute can be either a six-digit hexadecimal RGB number preceded by #, or one of the special named colors recognized by the browser.

Several other attributes that are used to format text also can be made global throughout the entire page by including them in the BODY tag, including:

text="color"

to specify default text color

link="color", vlink="color", and alink="color"

to specify the color of links, visited links, and active links, respectively

These attributes to the BODY tag remain quite useful in standard HTML, although, going forward, cascading style sheets provide a superior way to handle all of these details.

Preformatted Headings

HTML recognizes six preset heading formats, labeled H1 (the largest) to H6 (the smallest). The default typeface, font size, and other text attributes are predefined. In some ways they are specialized PARAGRAPH tags, because they force a new paragraph and consequent vertical spacing above and below. (They are used instead of paragraph tags, rather than within them.) By default, these preset headings are flushed left, but you can use the ALIGN= attribute or (preferably) styles to center or right-flush them. Heading tags need to be closed, e.g., <h1>This is how to code a heading.</h1>

I never used preformatted headers much until I began using cascading style sheets, which permit them to be redefined easily. Now I use them quite a lot, and recommend them as efficient ways to structure and manage the look of a page. Preformatted headings have another advantage: Search engines tend to scan a page for heading tags to help identify what sort of information actually is on the page.

Here are samples of the six headings in their default appearance:

This is a heading (H1).

This is a heading (H2).

This is a heading (H3).

This is a heading (H4).

This is a heading (H5).

This is a heading (H6).

Preformatted Lists

Three types of preformatted lists exist: unnumbered lists, numbered lists, and definition lists. The first two are nearly identical in use. The third is a bit different, so will be discussed separately.

<ul> ... </ul> <ol> ... </ol>
These stand for UNNUMBERED LISTS and ORDERED LISTS. (The latter is usually called a “numbered list,” but it helps me to know what the OL abbreviation means. Actually, I usually misremember it as “ordinal lists.”) The first creates a bullet list. The second numbers the list items. Between the open and closing tags of each, the <li> or LIST ITEM tag is used to designate each list item. Technically, a list item also should be closed </li>, but in HTML 4 this isn’t required. In XHTML it is required, though, so you might as well start now!

<ul type="bullet"> <ol type="x">
The UL tag creates a list that, by default, uses solid circular bullets (“discs”). However, it can have a TYPE= specification of disc (for solid circles), circle (for hollow circles), or square (for solid squares). If the <li> tag has a color specification, then both the bullet and the text will have that color. Similarly, the OL tag creates a list that, by default, is numbered in Arabic numerals. However, it can have a TYPE= specification of A (for capital letters), a (for lowercase letters), I (for Roman numerals), or i (for small Roman numerals). All of the above can be used for the <li> tag as well.

<ol start="n">
You can set a new starting number for an ordered list by using the start="n" attribute. For example, <ol start="11"> creates an ordered list where the first list item is given the number 11, instead of 1.

<li value="n">
This sets the value assigned to a specific list item in an ordered list. List item numbering will then continue from this reset number.

EXAMPLES: This code

<ul>
 <li>Alpha</li>
 <li>Beta</li>
 <li>Gamma</li>
</ul>

produces this unnumbered list

Alpha
Beta
Gamma

EXAMPLES: You can put lists inside of lists. For example, you can have successive levels of bullets or numbering. This code

<ol>
 <li>Alpha</li>
 <li>Beta</li>
 <ol type="A">
 <li>Large Beta</li>
 <li>small beta</li>
 </ol>
 <li>Gamma</li>
</ol>

produces this numbered (ordered) list

Alpha
Beta
Large Beta
small beta
Gamma

HINT: A single line break   tag after a list item <li> does nothing at all. A new <li> or a closing </ul> or </ol> tag already forces a line break. To double-space between list items, use two   tags. (This is admittedly a hack’s trick. It’s technically illegal and won’t pass the validator. Nonetheless, it works!)

<dl> ... </dl>
DEFINITION LIST tags. So-called because they were originally used to format term definitions in early academic use of HTML; but these are sometimes useful for other things as well (especially when supplemented with further formatting using styles). When you want to define a word, you usually want to list the word, then list its definition, right? In a definition list, these two parts are called the definition term <dt> and the definition definition <dd>. (Clever those acadamicians, no?) Adding the attribute compact to the definition list tag (in the form <dl compact>) causes definitions to be displayed on the same line as the term if the definitions are short enough.

EXAMPLES: This code

<dl>
 <dt>ALPHA</dt>
 <dd>The first letter of the Greek alphabet.</dd>
 <dt>BETA</dt>
 <dd>The second letter of the Greek alphabet.</dd>
 <dt>GAMMA</dt>
 <dd>The third letter of the Greek alphabet, which always confuses English-speakers that don’t know Greek because we can’t figure out why the alphabet goes A, B, G....</dd>
</dl>

produces this definition list

ALPHA
The first letter of the Greek alphabet.

BETA
The second letter of the Greek alphabet.

GAMMA

The third letter of the Greek alphabet, which always confuses English-speakers that don’t know Greek because we can’t figure out why the alphabet goes A, B, G....

(I made that last one longer so you could see how the text-wrapping works.) This code

<dl compact>
 <dt>ALPHA</dt>
 <dd>The first letter of the Greek alphabet, which, frankly, is half the reason we call it an alphabet.</dd>
 <dt>BETA</dt>
 <dd>The second letter of the Greek alphabet.</dd>
 <dt>GAMMA</dt>
 <dd>The third letter of the Greek alphabet, which always confuses English-speakers...</dd>
</dl>

produces this definition list

ALPHA
The first letter of the Greek alphabet, which, frankly, is half the reason we call it an alphabet.

BETA
The second letter of the Greek alphabet.

GAMMA
The third letter of the Greek alphabet, which always confuses English-speakers that don’t know Greek because we can’t figure out why the alphabet goes A, B, G....

HINT: Any of these elements is subject to other formatting, including the use of discrete paragraphs  within terms <dt> or definitions <dt>.

Other Preformatted Text

Before the introduction of cascading style sheets, several other preformatted tags were used to give ease and consistency in coding text of similar types, just as with preformatted headings (discussed above). It’s pretty much up to the browser how to interpret and render these; thus, today, they really give far less control and freedom than other options available. Still, they continue to be used and you’ll run into them when you look at the code of some web pages, so it’s worth mentioning them, even if only in passing. If you want to experiment with these, I suggest you create a simple page using them, and see how a particular browser renders each. (The samples below aren’t useful for that purpose, since, in some cases, I’ve forced them to look a certain way. This is because, by default, I’ve coopted some of them to specific purposes and altered how they behave. You’ll have to create your own sample page — consider it an exercise.)

<address> ... </address>: ADDRESS tags.
Historically used, especially in academicia, to give author contact information at the bottom of a page. It is a form of the PARAGRAPH tag, and therefore forces a line break before and after (as in the present example).
<cite> ... </cite>: CITATION tags. Usually rendered as italics (appropriate for book titles, etc.).
<code> ... </code>: COMPUTER CODE tags. Provides an alternate way of displaying computer output so that it looks like CRT text on a 1970s-era computer terminal. Usually rendered in SIZE="1" Courier. (I’ve coopted this tag on the present page to use for all of the HTML code that looks like this, redefining its look with a style-sheet specification. Otherwise, this present paragraph is what it would look like on your browser.)
<dfn> ... </dfn>: DEFINITION tags. Usually rendered as italics.
<kbd> ... </kbd>: KEYBOARD ENTRY tags. By default, usually the same as the CODE tag.
<samp> ... </samp>: SAMPLE TEXT tags. Usually the same as the CODE tag.
<tt> ... </tt>: TELETYPE TEXT tags. Another one that, by default, looks like CODE or KBD, etc. (However, I’ve coopted this tag on the present page to use for all of the HTML code that looks like this, redefining its look with a style-sheet specification. Otherwise, this present paragraph is what it would look like on your browser.)
<var> ... </var>: VARIABLE tags. Usually rendered as italics, a useful way to display variables in a computer manual. (Do you get the idea that all this was created initially by computer people and university people? <g>)

Hyperlinks

I want to start one step earlier than most discussions of hyperlinks: with the ANCHOR tags. This will make it easier to understand some other matters below.

<a> ... </a>
ANCHOR tags. By themselves, these do nothing. When attributes are added to them, they do some of the most powerful and useful things that can be done in HTML. (Simple ANCHOR tags like this with no attributes will not form a link and will not alter the way text is displayed. Until you add something else, it is as if you didn’t add the ANCHOR tags at all.)

<a href="link-location"> ... </a>
HREF or HYPERLINK attribute. Note that link-location is used above as a variable. When using it, substitute the actual page (or other file) address between the quotation marks. The text (or picture or other object) that you put between the opening and closing tags (the ... above) is what will appear on the web page as the familiar underlined, clickable link text. EXAMPLE: To link to the home page of this Windows Support Center, type: <a href="http://www.aumha.org/">Windows Support Center</a>
This will appear in your browser as: Windows Support Center.

HINT: Most hyperlinks are to other web pages, but there are other kinds you need also. For example, to cause a file to download, put the location of the file (either on a web site, FTP site, Intranet, etc.). Instead of http://, you can use other prefixes such as file:// (for a local computer file), ftp://, nntp:// (for a newsgroup server), or mailto: (for an email address, e.g., mailto:aumha@aumha.org).

Mailto: has some fairly popular added features. Unfortunately, they don’t work with all email programs, so you can’t really count on them. If the visitor’s email program supports it, you can pre-specify several header fields of the email that is launched by this link. This is done by appending (without any intervening spaces) a ? followed by the header field name, an = sign, and the text with which you wish to populate the field. (For any fields added after the first one, use & to link them instead of ?.) Where spaces are needed, use the ASCII code %20. EXAMPLE: One could link to The E-List’s feedback email address with a link pointing to mailto:elist@aumha.org. However, one could accomplish a great deal more (if one wanted to) by specifying something like mailto:elist@aumha.org?Subject=What%20a%20great%20newsletter!&cc=somebody@microsoft.com&bcc=abuse@aumha.org&body=I%20just%20wanted%20to%20tell%20you%20how%20great%20the%20current%20issue%20of%20The%20E-List%20is! Click here to try it and see how the generated email works on your email program. (Please don’t send the sample, though! To prevent accidents, I’ve rigged this one so it won’t end up anywhere.)

MORE HINTS: To link to a web page on a different web site, you have to use the http:// and the entire URL. However, to reference pages on the same web site, you are much better off using relative pathnames. These are very easy to understand if you are comfortable with MS-DOS folder navigation, because it’s almost identical. For those of you who are not familiar with this, I need to take a few paragraphs to gives some tedious examples. Please be patient, because this is important!

The slash character / in a URL is a directory or folder separator (just like the backslash \ in DOS). On the computer that hosts your web page, your HTML files, images, download items, etc. are all stored in folders. To say that this present page is http://aumha.org/html/lernhtml.htm means that on the hosting computer there is a folder (you never see its real name) that is equivalent to the location http://aumha.org. Inside that folder is another folder called html. Inside that folder is a file called lernhtml.htm. It’s just exactly the same as if this file were on your hard drive in a file designated as e:\mypage\html\lernhtml.htm. In fact, it’s exactly the same, because the same folder structure is how I store these pages on my hard drive.

In any folder, including the root folder of your domain, the default page usually is named index.htm (or index.html). This isn’t invariable, and a web server can be configured to expect a different default, such as default.html, but index is what usually is expected. There is really no difference between typing http://www.aumha.org and http://www.aumha.org/index.htm, because typing the former will cause the latter to be loaded by accepted convention.

If I want to link to or otherwise reference another page (such as frames.htm) in the same folder in DOS, I don’t have to call it e:\mypage\html\frames.htm. I can just call it frames.htm, because my current folder is presumed to be my starting place. The same is true on a web site: I don’t have to reference http://aumha.org/html/frame.htm if I’m doing it from inside http://aumha.org/html. It’s just assumed. I can just use frames.html. It’s measured relative to my current position. Similarly, if I’m on a page in the http://aumha.org/ root folder, I can reference this current page relative to my current location by calling it html/lernhtml.htm. Get it? (If not, just keep playing with it. It’s much easier to understand than to explain in writing!)

One more detail you need: Exactly as in DOS, to reference the “parent” folder — the one that is one level up from your current one (the folder containing your current folder) — you use two periods, .. instead of its name. So, from the current page in the http://aumha.org/html folder, I can reference a file in the aumha.org root folder — say, the file http://aumha.org/vellum.css — by calling it ../vellum.css. You can, and in fact should, use relative pathnames whenever possible. Write your code this way, then you can easily reference and test all of the web pages right on your hard drive. When you move them up onto your web site, keep the same folder structure and all of the links will be preserved perfectly.

A final hint: If the page’s web location (folder) is not the actual base you want used for relative pathnames, you can reset it with the <base href="URL base"> tag in the HEAD or BODY of your page. It will be used as the base for all relative URLs later in the page than the place where you put it. To bypass it for one or a few URLs on your page, simply use the entire (direct) URL instead of a relative one. EXAMPLE: On my KB Links: Password Problems page, I set <base href="http://support.microsoft.com/support/kb/articles/"> because nearly every link on the page pointed to a file in that folder on the Microsoft server. I placed the BASE tag in the body, after the BODY tag, so that it doesn’t affect URLs in the HEAD portion of the page or the BACKGROUND file in the BODY tag itself. On a few URLs that were not in that folder, I used the full URL beginning with http:// etc. View the source code of the page to see how this was done.

<a name="somename"></a>
NAME attribute. Note that somename is used above as a variable. When using it, you will substitute an actual name between the quotation marks. This is how you create a named anchor to a particular spot on your page. For example, this present section of this page, “Hyperlinks,” has an anchor at its top, <a name="links"></a> which serves simply as a marker to which you can link. Since it has no HREF attribute, the anchor is invisible on the page. You don’t have to put any text between the opening and closing tags, though you do have to be sure to use the closing tag. To link to an anchor, place # in front of its name. Using relative addressing, within this same page I can link to it simply by using <a href="#links"></a>. I’ve done that here — try clicking on this, then using your browser’s Back button to return to the exact location where you started. If I were to reference it from outside this page, I would need to precede it with the name of the page, for example, <a href="lernhtml.htm#links"></a>. By the way, one named anchor that is built into every web page is top — you can link to href="#top" to get to the top of a page. However, this should not be confused with target="_top" (quite a different thing) mentioned in the next paragraph.

<a href="link-location" target="destination">
TARGET attribute. Note that destination is used above as a variable. When using it, substitute other text between the quotation marks. Mostly you will need the TARGET attribute when working with frames, but there are times when it is useful in non-framed settings. For example, target="_blank" instructs the browser to open the linked URL in a new browser session, rather than in the current browser window. target="_top" instructs the browser to load the new (linked) page into current browser window, but to “load it from the top,” that is, overwrite not only the current frame (where you’re clicking the link) but also all other frames on the page. You can read more about this in context on my Frames in HTML page. (The link to that page uses target="_top").

<a href="link-location" title="some text">
TITLE attribute. The “title” of a link is the little tooltip-like box that pops up when you hover your mouse over the link. You can use this to add any sort of short message you want. As an example, hold your mouse pointer over the linked word “here” at the top of this present page.

Images & Sound

Coding image insertion has some things in common with coding hyperlinks. Unlike hyperlinks, clicking an image doesn’t take you anywhere (unless, of course, you put the image within hyperlinked anchor tags, which often is done). However, relative file referencing is exactly like hyperlinks, so you should be familiar with the above section on Links before proceeding.

<img src="filepath">
IMAGE tag. Note that filepath is used above as a variable. When using it, you will substitute the actual file path and name between the quotation marks. This tag then will say, “Put image file such-and-so here.” For example, I can insert into the present page the file named mvplogo.gif located in my images folder by typing <img src="../images/mvplogo.gif">, like this: MVP logo Whoa! What happened? Well, the image was added exactly where I put it, and it was taller than a line of text, so it used up its own height and then continued the line of text.

MVP logo If, instead, I want it flush left or right next to the paragraph’s text, then I can add an ALIGN= attribute pushing it either left or right, and make sure that I put the code at the top of the paragraph. For example, look to your right to see what happens when I use <img src="../images/mvplogo.gif" align="right"> as the first code in this paragraph, before “If, instead”. (Now I have to keep typing a while to make sure that you have a paragraph large enough that it will show how this works, no matter what browser size setting or screen resolution you are using. Oh, the agonies of web page design!!! <vbg>) You can also use align="top" (or "bottom" or "middle") to produce an effect like the first one above, but forcing the current text line to line up either with the top, bottom, or middle of the image.

<img src="filepath" width="width" height="height">
WIDTH and HEIGHT attributes. It is important to preset the width and height at which your pictures will be displayed. (Fill in width and height above with actual numbers in pixels.) This is for two reasons. The lesser reason is that it will display your picture the size you want it. I say this is the lesser reason because you really should use your image-editing program to get it to exactly that size to begin with so that, for example, you aren’t loading eight times the size of file you need in order to show a picture one-eighth the size. Slow image loading is one of the main reasons so many web pages load slowly! The greater reason for prespecifying width and height is that the browser can “reserve space” for the image when it builds the initial page. Your visitor can then see most of the page while it’s opening, read the text, scroll around, and know where a picture is going to be once it finally finishes loading, and without the browser needing to repaint the page once the picture finally appears.

HINT: This is a good place to mention that you should view your web page with your monitor set at different screen resolutions. A picture size that looks perfect on your 1024 x 768 19" monitor may “dominate the field” quite differently on a 13" or 15" monitor set to 640 x 480.

<img src="filepath" border="n">
BORDER attribute. Specifies the border thickness around the image. To remove a border, set n to 0. (This attribute is deprecated in HTML 4. While the default value for this depends on the browser, most now use a value of 0.)

<img src="filepath" hspace="x" vspace="x">
HORIZONTAL SPACE and VERTICAL SPACE attributes. These specify the minimum amount of space, in pixels, between an image and the surrounding text. Use them alone, or in combination with the BORDER attribute. HSPACE= specifies the minimum border on the left and right sides, and VSPACE=, that on top and bottom. NOTE: These, like BORDER, are deprecated in HTML 4.01. In other words, it isn’t recommended that you use them. They’re on the way out.

<img src="filepath" alt="Some Useful Name">
ALTERNATE TITLE attribute. Some older browsers don’t display pictures. Some users have images turned off. And everyone else just might be looking at your page before the image loads. So, give it an alternate title. This will be displayed in small type in the space set aside for the image, before the image loads.

<bgsound src="filepath">
BACKGROUND SOUND tag. Works just like the IMG tag, but lets you specify a wave or MIDI file to be played in the background whenever the web page is displayed. It can go anyplace in the HTML file. NOTE: This only works in Internet Explorer. FURTHER NOTE: Anyone using this tag should be shot — or, at least, they probably will be shot.

META Tags

In addition to the introductory summary I give below, I recommend you read Cherina Sparks’ excellent article <META>: tags are what, exactly?

<meta name="property-name" content="content"> <meta http-equiv="property-name" content="content">
META tag. These go in the HEAD of the page, rather than the BODY. I am not as fond of the META tag as most people for the purpose of obtaining search engine listings for the page. The big search engines use this very little these days. Still, it has its place. Additionally, the META tag is useful for setting other “meta-data” (information variables for a page). The META data defines variables (called “properties”) and assigns values to them (called “values”). The http-equiv attribute can be used more or less interchangeably with the name attribute, and should be used to provide an HTTP server with information for HTTP response message headers. In any case, there is no closing /META tag. HTML doesn’t define what properties are legal-legitimate, so usage primarily follows popular conventions. Here are some useful properties sometimes used in the META tag:

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
This specifies the type of character encoding used by the page (in this case, ISO-8859-1). It may assist browsers configured for other languages to use a code page that will correctly display your page. For information on character encoding, and the ISO 8859 character sets in particular, see Roman Czyborra’s page.

<meta name="keywords" lang="en-us" content="keyword, keyword..."> <meta name="description" content="brief page description"> <meta name="revisit-after" content="x days"> <meta name="robots" content="all, index, follow">
Historically, these have been useful META tags for instructing search engines regarding the indexing of your pages. However, the major search engines mostly don’t use these anymore (at this writing, only Inktomi supports them). The era of META tags is about to expire. Of course, it never hurts to have the data available provided you select honest, accurate keywords for your site. For an indication of how deprecated META tag keyword use is becoming, see Danny Sullivan’s article, Death of a Meta Tag.

The first line above provides content keywords for your site (and specifies their language, e.g., US English; substitute en for British English, fr for French, etc.). The second gives a brief description of what the page is about. The third recommends how often the search engine should revisit your page to check for updated content. (Put a real number in place of x. Also, be realistic about this — if they revisit on a schedule you recommend and find no significant change in the site, they are likely to set their own arbitrary long revisitation cycle instead.) The fourth line provides further instruction to search engines robots.

<meta name="author" content="page author’s name"> <meta name="email" content="author’s email address">
These are purely for providing identifying and contact information, which may or may not be of any use to you.

<meta http-equiv="refresh" content="x"> <meta http-equiv="refresh" content="x; url=URL">
The first one is an instruction to an HTTP server to refresh your page after x seconds. (Most pages don’t need this at all!) The second variation is more useful and, in fact, is the most efficient way to set a page forward (the only way known to me that doesn’t involve JavaScript): Substitute for URL the URL to which you want the visitor redirected, and substitute for x the number of seconds before they are redirected. Carefully note where there are, and are not, quotation marks in the second variation! (W3C advices against using this method for redirection. In any case, an alternative redirection mechanism should be provided for browsers that don’t support redirection, e.g., a link for users to click if they are not automatically forwarded.)

Other Useful HTML Tags


COMMENTS. Any text you place between  is ignored by the browser as a comment. (There are rare exceptions that are discussed as they come up.) This is very handy for several reasons. For one, it allows you to add comments to your HTML files so they are easier to read. For another, it allows you to temporarily remove text or code from your page without deleting it. You can probably find other uses as well.

<hr> or <hr />
HORIZONTAL RULE tag. This draws a centered horizontal line across your page. You can format it by adding various attributes. For example, control the line’s width with the WIDTH= attribute (expressed as a percentage of the browser window’s width, or as an absolute length). Control it’s thickness with the SIZE= attribute (expressed in the same way you would express a FONT size), or its color with a color= attribute (again, in the fashion of a FONT tag attribute). The ALIGN= attribute can be used to place the horizontal rule at the left, center, or right (default is center). The first version given above is recommended for going forward, though either version works in current versions of HTML.

NOTE: The color= attribute has been dropped in the formal definition of HTML 4, though most browsers still support it. (Opera 6 does not.) The SIZE= and WIDTH= attributes are deprecated in HTML 4 — fair warning that they are on their way out! — with a recommendation that styles be used instead. Though they remain formally supported in the HTML standard, some browsers already have stopped supporting them.

EXAMPLE: This code

<hr />
<hr width="50%" />
<hr width="50%" color="red" />
<hr width="50%" color="#0000cc" />
<hr size="1" width="70%" color="#0000cc" />
<hr size="7" width="70%" color="#0000cc" />
<hr size="2" width="50%" color="red" align="left" />

produces the following selection of horizontal rules:

<del> ... </del>
DELETED TEXT tag. Usually rendered as strike-through by default. ~~This sentence is a sample of how it looks on your browser.~~ Older browsers may ignore it completely; it replaces the <strike> tag of HTML 3 and earlier. (<strike> still works, but is on the way out. You may wish to use both <strike> and <del>, nested, so that the effect appears in all browsers.)

<ins> ... </ins>
INSERTED TEXT tag. Usually rendered as underlined text by default. This sentence is a sample of how it looks on your browser. Older browsers may ignore it completely.

Special Characters

As you likely have noticed by now, some keystroke characters, such as the less-than < and greater-than > characters and the double-quote " are used as part of the HTML language. This means that they can’t reliably be used as simple text characters. Many browsers today will recognize them correctly, at least most of the time; but not all will, and not all will get it right all the time. Good HTML practice says not to use these characters as simple text just by typing them on the keyboard. Instead, special escape codes were created for these, and expanded to include a variety of other characters that you may want on your page but not be able to find on your keyboard. Numeric codes are available for all of them, and alpabetic codes are available for most. All of these special codes begin with an ampersand and end with a semicolon. Unlike other parts of HTML, these are case-sensitive

So, instead of typing just an ampersand & (since it got recruited to “escape code duty”), you have to type the code &. Instead of a quotation mark, type ". For the less-than and greater-than signs, use < and >. (Looking back over this page... do I now have your sympathy for what it took to type up this particular page? <g> If you want to see what it is like to type so many of these characters, examine the source code of the page itself.)

HTML ignores more than a single space between any text. If you want to add spaces you need to use a non-break space character, which is  . Among the applications for this are that you can use several in a row to create an indentation effect.

There are also special characters such as accented letters of various sorts, “smart quotes,” dashes, copyright and trademark symbols, and more. For a list of these, see the Special Characters page provided by PageTutor.

Validate Your Code!

We all need a little validation now and then, don’t we?

You want to learn to write good, clean HTML code that stands the maximum chance of being understood and correctly rendered on the largest possible number of browsers that view your pages. You also want feedback on how you’re doing — how your learning curve is going. Additionally, it’s simply a good idea to check your work. One of the best ways to accomplish all of this is to run your page through an HTML validator such as the one provided here.

NOTE: You’ll find that some of my pages don’t pass the validator I just recommended. Most will. A few won’t. This is a case of “Do what I say, not what I do.” It’s also a case of, “Do it now, when you’re starting out, and don’t wait until you have hundreds of pages on your site like I do.” When I entirely recoded most of the pages several years ago, I got most of them checked, but not everything. It’s easier to do it right at the beginning than to catch up everything later. Please learn from my mistake!

Other References

Top of Page Home Site Map Search Forums Feedback Donate