HTML Constructs
An HTML document is composed of two main kinds of constructs: elements, also called tags and entities which will be discussed in the section titled Escape Sequences.
Tags
An HTML tag is a signal to the browser that it is to do something more than just display text on the screen in the default font. Tags are instructions embedded directly into the text of the document and are identified by being included in angle brackets (<>). For example, in
Not all tags are supported by all browsers. If a browser encounter a tag that it does not understand, it will usually be ignored.
Container Tags
The <b> and </b> above are an example of a container tag. The <b> activates the effect (in this case, bold) and the </b> deactivates the effect. The effect is applied to the text that is enclosed between the paired tags. The <b> is known as the opening tag and the </b> is called the closing tag.
Non-container Tags
The second kind of HTML tag is the stand-alone tag. This type of tag has no companion tag and does not enclose text; for that reason you may see it refered to as an empty tag. An example of this type of tag is <br> which forces the browser to insert a line break at the position where the tag is located. No text is actually effected by this tag, so a closing tag is not needed.
Tag Attributes
Each tag has one or more keywords that instruct the browser what it is to do. In the example above, the 'b' in <b> and the 'br' in <br> are keywords. In these cases, the keyword is sufficient to tell the browser what to do. That is not always the case. For example, the top page of this section includes the spinning globe image. Graphics are inserted into the document using the <img> tag. This however, is not enough to tell the browser what to do. For example, the browser needs to know what image file to insert into the document. This is accomplished with the tag:
HTML
Syntax:
The HTML opening tag is usually the first tag in your document and the paired closing tag is the last. This signals the browser that the enclosed text is HTML encoded.
HEAD
Syntax:
The document head is the first of two major sections in the HTML container. The head contains information that is crucial to the operation of your browser and the success of your document, even though almost none of the information will be seen by the end user.
TITLE
Syntax:
The title is the only element in the head section that will be seen by the user. The title appears in the Title Bar of the browser window, it is what is listed in the Bookmarks (or Favorites) list and the History list. The title is also indexed by most search engines.
META
BODY
Syntax:
The body is the second major section in the HTML container. This is usually the largest section of the document and contains the information you want to convey to the reader.
| Attributes | |
| bgcolor | Sets the document background color |
| background | URL of the image used as the document background |
| text | Sets the color of the body text |
| link | Sets the color of unvisited hypertext links |
| vlink | Sets the color of visited hypertext links |
| alink | Sets the color of active hypertext links |
see color
Horizontal Rule
Syntax:
The Horizontal Rule places a dividing line across the screen. One aspect of the line that may be confusing is that the width attribute determines the length of the line, the line width is determined by the size attribute.
| Attribute | |
| align | Determines the lines placement on the screen
Default is Center |
| noshade | Supresses the default shading effect |
| size | Sets the verticle width of the line in pixels |
| width | Sets the length of the line
Can be expressed in pixels or as a percentage of the total screen width (recommended) |
Headings
Syntax:
The Heading tags are headline levels and do four things.
For example:
Paragraphs
Syntax:
The paragraph tag inserts a line break and blank line into your document. This is important because browsers ignore any extra white space. All white space (spaces, tabs, line breaks, blank lines, etc.) are reduced to a single space character. For example, if your source document contains:
Your browser will display it like this:
This is not the way to indent a paragraph. Nor is it the way to separate one paragraph from another.
The align attribute sets the line justification to left, center or right. The default is left.
| Note: | The close paraghraph tag (</P>) is optional. When the browser encounters the next <P> tag, it understands the implied end of the previous paragraph. |
Unordered Lists
Syntax:
The unordered list produces an indented, bulleted list. The compact attribute reduces the space between list items and the type attribute sets the bullet character used, the disc is the default. The type attribute on the List Item tag lets you change the bullet character for each item. The different bullets look like:
As with the Paragraph tag, the closing list item tag (</LI>) is optional because the browser understands that the begining of the next item implies the end of the previous item.
Ordered Lists
Syntax:
The ordered list creates an indented, numbered list. The type attribute determines the type of numbering used and the start attribute specifies the starting number. The value attribute will override the number for that item and the numbering will continue from that point.
| Attribute | |||||||||||
| Start | Specifies the starting number | ||||||||||
| Value | Specifies the current item number | ||||||||||
| Type |
|
As with the Paragraph tag, the closing list item tag (</LI>) is optional because the browser understands that the begining of the next item implies the end of the previous item. <DL compact>
Documents with a lot of technical terminology will usually require a glossary of terms where the user can look up the definition of a term. The definition list is an easy way to implement the glossary. The term being defined is placed between the <DT> and </DT> tags which is followed by the definition of that term placed between the <DD> and </DD> tags. The resulting browser display shows the definition following the term on the next line and indented. For example, the example above would be displayed as:
Other than indenting the definition, there is no special formatting of the text in the list. Embedding other formatting tags are frequently advisable when using the definition list. For example, you might want to use the <B> or <STRONG> tags to bold the term to help set it apart from the definition.
| Attribute | |
| Compact | Reduces the amount of space between items in the list. |
Nested Lists
will produce the following results:
By nesting ordered lists with different numbering types can reproduce a document in a standard outline form. For example, the code:
<OL type="I">
will produce results that look like this:
Preformatted Text
Syntax:
Preformatted text displays in the browser exactly as it appears in the source document; with spaces, tabs and line breaks intact in a fixed width font. Before tables were added to the HTML specifications, preformatted text was the common way to display tabular data. Now it is used primarily for program listings, the following example is an excerpt from my article on code generation from xBase displayed in preformatted text:
* updated: 3/22/94
set safety off
set talk off
close all
k = substr(dtoc(date()), 1, 2) +
substr(dtoc(date()), 4, 2)
fna = "GOOD" + k + ".txt"
fnm = "OLD" + k + ".txt"
outpath = "d:\comm\tobesent\"
command = "pkzip "+outpath+"rost"+k+".zip
-bh: -ex -m @h:\include.lst"
use BATMAKER
zap
append blank
Extended Quotations
Syntax:
Use the blockquote tag to include lengthy quotations in a separate block. Most browsers change the margins to separate the quotation from the surrounding text. For example,
Omit needless words.Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.
--William Strunk, Jr., 1918
Addresses
Syntax:
The address tag us usually used to specify the author of a document, how to contact the author (email address) and a revision date. It is usually the last line of the document. For example,
<ADDRESS>
Mike Bianchi / Alamo PC Organization / milin@flash.net
</ADDRESS>
displays
| Note: | The address tag is not used for postal addresses. Note that the information is all on one line and italicized. For postal addresses, see the next section. |
Forced Line Breaks
Syntax:
The break tag forces the line to break with no extra white space between lines. Using the example in the previous section:
displays in the browser as
Postal Addresses
To get a postal address in the customary format, you embed the break tag (<BR>) within the address tag (<ADDRESS>) like this:
<ADDRESS>
Mike Bianchi<BR>Alamo PC Organization<BR>134 Central Park
Mall<BR>
San Antonio, TX 78216
</ADDRESS>
giving the result:
Center
Syntax:
The center tag is a generalized centering function that will cause any enclosed element to be centered on the screen.
The currently acceptable method of centering an element is to use the align attribute.
Font
Syntax:
The attributes of the font tag set the characteristics of the text included within the tag.
| Attribute | |
| Face | A list of font faces to use on the inclosed text. The browser will use the first fontface in the list that it finds installed on the users system. Not all browsers support the face attribute. |
| Size | Absolute size is determined by the number
n which can range from
1 - 7. The default size is 3.
Relative size is expressed as ±n giving the font size relative to the basefont size. |
| Color | The font color can be expressed as the hex color designation (#RRGGBB) or as a colorname. HTML's supported color names are Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, Yellow and White. |
see color
Non-breaking Space
Syntax:
The non-breaking space tag inserts a nonprintable character into your text. When displayed in the browser, this character appears to be a space, however, this prevent the browsers wrapping feature from separating words on separate lines. Inserting several of these characters at the begining of a paragraph is one method that can be used to indent the paragraph.
Comments
Syntax:
Comments are added to the source document for your own information and are ignored by the browser.
In addition to documenting your page, one use of comments that I use often is to mark the position in the page of frequently changed information. For example:
Comments are also useful for temporarily removing sections of your page for testing.
Logical and physical styles are different ways to code the same effect in formatting your document. Some examples are:
| Effect | Physical | Logical |
| Bold | <B> | <STRONG> |
| italics | <I> | <em> |
So if they do the same thing, why have both? Ideally, content should be separate from presentation. When SGML tags a level-one heading it is a level-one heading, it is the browser's job to determine how it should be displayed. For example, the browser may be set such that <H1> means 24-point bold centered Times.
This Logical style is somewhat like using style sheets in a word processor. An advantage is that you do not have to worry about remembering what style the tag represents, simply tagging <H1> will display the text consistantly throughout the document. A second major advantage is that it is much simpler to change how the effect is displayed. If, for example, you decide you want <H1> to be displayed as 32-point left-justified Ariel, you don't have to retag every location in the document where it is used and hope you found them all, it is only necessary to change the browser setting.
<STRONG> normally displays text as BOLD and <EM> normally produces ITALICS text but these effects can be changed to display, for example, in a different color. If you want your text to always display in a specific way, use the physical style. However, keep in mind that future releases of the HTML specification may not support physical styles.
Escape sequences give you a way of displaying:
Escape sequences can be coded in two ways, either by using a specific code or by using their ASCII numeric equivalent. They always begin with an ampersand (&) and end with a semi-colon, in addition, when using the ASCII number, the ampersand is followed by the # symbol and then the number.
In the following examples, keep in mind that not all browsers will support all codes. If the symbol does not appear in the right column (you will probably see the code in both columns), your browser does not support that particular code.
Some examples of HTML reserved symbols are,
| Code | Symbol |
| < | < |
| > | > |
| & | & |
Examples of non-keyboard characters:
|
|
Examples of non-Enlish language symbols (this is the only time that HTML is case sensitive).
|
|
Some examples of escape sequences using ASCII numeric codes, many of these symbols are not available any other way.
|
|
|