Principal Elements

HTML

The tag <html> is the first tag, and the closing </html> is the last tag in the document. This tells the browser where to start and where to end, When you save the completed file you must use the extension .html so that it is recognized as an HTML document.

The Head element <head> contains several items which are read by the Browser and also by Search engines, such as "Google", but they are hidden from the reader. Some of these items are called "Meta Tags" and are optional. They will be discussed later.

TITLE

The title element <title>must be the first right after HEAD. It contains your document title which is typically displayed in the title bar at the top of the browser window. The title identifies your page for search engines and for bookmark lists. It should uniquely describe the contents of your Web page and must be less than 64 characters.
You must close with the end tag </title>.
The HEAD section must be closed with the end tag </head>

BODY

This is the largest part of your document and starts with the tag <body>.
It contains all the elements that the reader will see, such as headings, lists, images, tables, etc. The general appearance of your page is determined by attributes embodied within the BODY tag. If none are specified the Browser will use its default values.
bgcolor="#rrggbb" determines the page color, where rr, gg and bb are the hexadecimal values for the amount of red, green and blue. See Colors for a detailed discussion, with color charts. A typical default value is bgcolor="#ffffff" or white.
text="#rrggbb" determines the text color, typically "#000000" for black.
link="#rrggbb" determines the color of links to other pages, typically "#0000ff" or blue.
vlink="#rrggbb" determines the color of a link that has already been visited, typically "#800080" or violet.
background="image.gif" provides for a background pattern, see Backgrounds page for more information.
NOTE: The background color of this page was set at bgcolor="#ffffcc" "Antique White".

Background and Text Colors.

Background Patterns.

Special Characters

Body Text Elements

Carriage returns in HTML files aren't significant. In fact, any amount of whitespace -- including spaces, linefeeds, and carriage returns -- are automatically compressed into a single space when your HTML document is displayed in a browser. Word wrapping can occur at any point in your source file without affecting how the page will be displayed.

Paragraphs

You indicate the start of a paragraph with the tag . The end of a paragraph is shown with the closing tag . Many tutorials tell you that a closing tag is not needed.
Popular attributes are 
,


You provide a line break without white space between lines with the tag  . There is no closing tag, but the new rigorous standards require you to write this tag thus:  . For example:

My address is:  John Doe  123 Main Street  Newtown, NJ 08901

Headings

HTML has six levels of HEADINGS, numbered 1 through 6, with 1 being the largest. Headings are typically displayed in larger and/or bolder fonts than normal body text. The syntax of the heading element is:
<hy>Text of heading </hy>
where y is a number between 1 and 6 specifying the level of the heading.

Heading tags may incorporate attributes:
< align="left">, this is the default if no alignment specified.
< align="center">,
< align="right">
Note:Headings automatically include a line break and a line of space.
Example: <h3 align="center">

Text Appearance

There are three tags that change the appearance of any text elements between them:
 bold face, up to the end tag 
 text in italics, up to the end tag 
<tt> mono-spaced typewriter text up to the end tag </tt>

You may nest tags to combine several elements, but the end tags must be placed in exactly the reverse sequence. For example: bold italics .
 aaa  is incorrect and will produce unexpected results.

Character Entities

You may use all the characters on the typewriter keyboard, including all letters, numerals and symbols (so called "ASCII characters"), except the less-than and greater-than symbols < and > and the ampersand &. These symbols have special meaning in HTML markup code. To represent them we use what are called escape sequences.
Whether to replace the quotation mark " with the equivalent escape sequence is optional. However, to designate additional white spaces it is essential to use the escape sequence  . Certain other popular symbols, such as the British pound £ and the Euro € can only be represented in this manner. The table below lists these symbols.

symbol	<	>	&	"	space	£	€
entity	`<`	`>`	`&`	`"`	` `	`£`	`€`

There are many accented letters in languages such as French, German, Polish, Russian, etc, that cannot be typed on an English keyboard. See Special characters for a discussion of this complex subject.

Paragraph alignment

This paragraph is aligned left, this is the default mode.

This paragraph is center aligned.

This paragraph is aligned right.

Example of address, with line breaks:

My address is:
John Doe
123 Main Street
Newtown, NJ 08901

Examples of headings:

Title 1

Title 2

Title 3 centered

Title 4 right aligned

Title 5

bold face,
text in italics,
text in mono-spaced type,
bold italics

Fonts

Every Browser automatically uses a default font face, typically Times Roman.
The font size that you see on the screen is determined by the Browser; however you, the user, have control over it. For example in MS Explorer, click on the "View" Tab, then "Text Size", You have 5 choices from Largest to Smallest with Medium being the default size.

The Web page designer may specify font face, color and size for the entire document in the <body> specification. You can also change them at any place in the text, for example in a specific paragraph:
This is red text, one size larger than default size. Don't forget to put end tag !
Don't overuse this feature. It is better to use Style sheets for this purpose, but that's another subject. You can use sizes "+1" for one size larger, "-1" for one size smaller. Still larger and smaller sizes are possible but I recommend against them.

You can also change font face to a non-serif style (the most frequently used) as follows:
This line is in a non-serif font face, the actual appearance depends upon your Browser..

Here is how these two font examples appear on your Browser (this is the default font for your Browser):

This is red text, one size larger than default size

This line is in a non-serif font face, the actual appearance depends upon your Browser..

Return to 1 ; Continue to Part 3 - Links ; 4 ; 5 ;

Return to Top of page, or to Web Design Table of Contents.

Last update November 2003