Skip to main content.

Web Based Programming Tutorials

Homepage | Forum - Join the forum to discuss anything related to programming! | Programming Resources

Web Database Developer's Guide with Visual Basic 5

World Wide Web Database Developer's Guide with Visual Basic 5


An Overview of HTML 3.2

Up to this point you've focused on some of the foundational building blocks that are required to implement a Web-based architecture database. This chapter expands on those concepts by describing how data is formatted and presented to users.

Creating your own Web documents using HTML is actually quite easy. Anyone with access to word processing software can design simple HTML pages almost immediately--as you can tell by the proliferation of home pages being posted by thousands of individuals and companies worldwide. This ease of use has helped make the World Wide Web the great phenomenon that it is today.

As HTML specifications become more refined, however, and as advances in Web technologies become more readily available, you'll find a rich and rapidly growing suite of tools at your fingertips for developing Web-based database applications and presenting data to the end user. To effectively present data, you'll need to take advantage of some of the more advanced features of HTML (that is, objects, tables, lists, and so on).

This chapter introduces you to HTML. First, it covers the HTML basics and conformance levels as well as reviews some of the HTML tags that make up Levels 0 and 1. Next, it explains the HTML/SGML relationship and talks a little about HTML authoring style guidelines, available HTML editors, and HTML conversion programs. Finally, it presents the HTML Level 2 specifications and the enhancements available in both HTML Level 3.2 and the Netscape extensions.

What Is HTML?

HTML, which stands for Hypertext Markup Language, is a simple yet powerful markup language used to generate platform-independent hypertext documents that are viewable by a Web browser. Markup languages use special document-formatting tags that are designed with a specific syntax for each tag. These tags are then included within other documents to specify the formatting and presentation of the document. HTML documents are based on Standard Generalized Markup Language (SGML) but with generic formatting tags that are appropriate for representing information from a wide range of domains.

HTML is used in many applications. Here are just a few of these applications:

The standardization of HTML was originally completed by the WWW consortium under Internet Engineering Task Force (IETF) Request for Comments (RFC) 1866. This standard, previously referred to as "HTML Version 2," has recently been superseded by the new specification HTML 3.2. Not all current browsers, however, implement the full set of features of HTML 3.2. A compliant browser is expected to ignore any element or attribute of the HTML 3.2 specification that it isn't designed to handle. In addition, some Web browsers define and handle their own extensions (such as Netscape Navigator and its Netscape extensions and Microsoft's Internet Explorer extensions).

HTML/SGML Relationship

SGML is an international standard for electronic document exchange. It is the basis of the HTML Internet standard that, together with URLs and HTTP, forms the foundation of the World Wide Web. HTML is an application of ISO Standard 8879:1986 Information Processing Text and Office Systems: Standard Generalized Markup Language (SGML).

Simply put, HTML documents are SGML documents with generic semantics that are designed for formatting and representing information. Each HTML document consists of data (actual contents of the document), a structure (headings, paragraphs, and so on) and a format (the final appearance of the document).

HTML Levels of Conformance

Five levels of conformance of HTML currently exist. These are referenced as Level 0 through Level 4:

Level 0 This is an implied level of conformance and isn't included as part of RFC 1866. This level includes HTML structure and comment elements, head-related and body-related elements such as headers, lists, and image support. Level 0 conformance is expected of all Web browsers.
Level 1 This conformance information is included as part of RFC 1866 and includes image-handling and character-formatting features such as emphasis and text highlighting. Level 1 conformance is supported by all graphical Web browsers.
Level 2 This conformance information is also included as part of RFC 1866. This level includes forms and character definitions. Along with Level 1 specifications, Level 2 makes up the majority of conformance that almost all graphical Web browsers support today.
Level 3.2 This conformance isn't included as part of RFC 1866 but has been proposed as extensions to RFC 1866. This level includes tables, figures, and graphical backdrops. Netscape Navigator and Microsoft Internet Explorer support proposed Level 3.2 HTML tags in addition to their own extensions.
Level 4 This conformance isn't included as part of RFC 1866 but is proposed to include mathematical formulae.

What Are URLs?

HTML uses URLs to identify the location of documents. These documents can exist on the same machine as the Web browser, on the same machine as the Web server, or on other Web servers. The structure of a URL includes the type of resource, the address of the Web server servicing the document, and the location of the document. The syntax is of the form


where resource is one of the following values:

Value Meaning
file A file on your local system
ftp A file on an anonymous FTP server
http A file on a World Wide Web server
gopher A file on a Gopher server
wais A file on a WAIS server
news A Usenet newsgroup
mailto An SMTP mail interface
telnet A connection to a Telnet-based service

Here is a sample URL:

The port number can generally be omitted. If omitted, the default port of 80 (which is a reserved port and requires root execution privileges on UNIX-based machines) is assumed.

Figure 10.1 shows a sample Web page and URL in the Web browser.

FIGURE 10.1. Web browser URL location.

What Are Tags?

HTML uses markup tags to tell the Web browser how to format and display the text. Additionally, tags are available for displaying inline images, invoking MPEG movie viewers, playing audio clips, specifying hypertext links, accepting user input, and invoking application programs via the Common Gateway Interface (CGI). The latter two topics are covered in detail in later chapters.

HTML tags are simply ASCII characters or character strings delimited by angle brackets (<>). Most tags are paired with an opening and closing tag. The opening tag tells the Web browser to begin special handling or formatting based on the specified tag. The closing tag signals the Web browser to stop special handling or formatting.

For example, to specify emphasized text, you would include it within the <EM> and </EM> tag pair. An example of <EM> tag use is as follows:

<EM>This would display as italicized (emphasized)</EM>

However, tags such as the line-break tag <BR> and the <INPUT> tag do not have closing tags.

TIP: Although the closing tag may be omitted for some HTML elements such as the paragraph </P>, the list item </LI>, the definition term </DT>, and the definition description </DD>, omitting closing tags decreases the readability of your source document.

Some tags have associated parameters, called attributes, such as color, background, width, and so on. Here is a sample tag attribute for specifying the width of a horizontal rule to be 80 percent of the page width:

<HR WIDTH=80%>

CAUTION: Keep in mind that not all tags and attributes are supported by all Web browsers. If not supported, the tag or attribute is simply ignored. This can cause an improperly formatted screen, as is the case with a Web browser that doesn't support the use of HTML tables. It is a good practice when authoring HTML documents to include only those HTML tags supported by the majority of browsers.

Markup Tags (Level 0)

The most basic set of tags needed to generate a HTML document is included in the Level 0 tag group. All Web browsers, both graphical and text-based, are expected to support Level 0. This section introduces some of the most common tags that make up Level 0.

<HTML> Tag

Every HTML document must include the <HTML> tag pair. This pair is the fundamental information required to allow a browser to interpret the enclosed context as an HTML document. The <HTML> tag serves to identify the beginning point, whereas the </HTML> tag identifies the ending point of the document. The <HEAD>, <BODY>, and associated sub-elements are included within the <HTML> tags. Here is an example of the <HTML> tag pair:

Other header and body tags

The Comment Tag

The comment tag is used to include useful information for the designer and reader. Properly documenting your documents is good HTML coding style. The syntax for the comment tag is as follows, where string is the comment:

<!-- string -- >

One common use for this tag is to identify revisions of the document. Here's an example:

<!-- Revisions: created 01/01/97 -- >

TIP: The comment tag can be used as a search mechanism for programs that update HTML documents automatically on-the-fly. For example, you can add the following comment to your HTML document.
<!-- Load new documents here -- >

You could then have a program search for that text string and insert new hypertext links just before or just after the comment.

<HEAD> Tag

The <HEAD> tag is used to identify prologue information, sometimes referred to as "header" information, for your document (this tag should not to be confused with header tags). Information contained within the <HEAD> and </HEAD> tag pair can be used by other programs, such as indexing engines.

The following example shows this tag pair added to the <HTML> tag example shown earlier:

Other header tags
Some body tags and data

As indicated in this example, the <HEAD> element can consist of other header tags or sub- elements such as <TITLE>, <BASE>, <NEXTID>, and <ISINDEX>, which are discussed in the following sections.


The <TITLE> tag is used to identify the content of the document and should be included in every HTML document. In some cases, the title is also used for document identification in other contexts. For instance, when used in conjunction with a Wide-Area Information Service (WAIS) search engine, the title is generally used as the document's hypertext link string. The title should succinctly identify the content of the document. In some Windows-based Web browsers, the title is used as the text for the title bar of the window.

Here's a sample <TITLE> tag that could be used to identify the outline for this book:

<TITLE>World Wide Web Database Developers Guide Using Visual Basic</TITLE>

TIP: Some search engines use the text contained with the title as a search index for the document. By properly crafting your titles, you can make your documents easier to search. For example, the title
<TITLE>FY96 Sales Statistics</TITLE>

is a more identifiable title than something like


<BODY> Tag

The <BODY> tag is used to enclose the remaining portion of your document. The <BODY> tag enables you to control such attributes as the background color and an image to be tiled across the background. All other text and content tags are placed within the <BODY> and </BODY> tags. Here is a sample <BODY> tag that generates a yellow background, an image (image.gif) superimposed over the background, and a blue foreground for the text:

<BODY BGCOLOR="yellow" BACKGROUND="image.gif" TEXT="blue">
The actual text (included after HTML tags) of your document

Headings: The <H#> Tag

The <H#> tag is used for major and subtopic/subsection headings within HTML documents. The # symbol refers to the level of heading. HTML levels of headings are numbered 1 through 6, with 1 being the largest and 6 the smallest.

CAUTION: Successive spaces in an HTML document are replaced with a single space. Some exceptions to this rule are the paragraph and heading tags, where the spaces immediately following these tags are totally ignored.

Headings are displayed by browsers in larger and/or bolder fonts than normal body text. Heading 1 is the most prominent and is generally the first heading in a document. Subsequent headings (2-6) are displayed in gradually decreasing font sizes and are meant for use as subheadings within documents.

NOTE: Generally, headings are displayed in decreasing sizes beginning with <H1> as the first header, <H2> as the second header, and so on. However, it is perfectly valid to start with a smaller heading (larger number) in order to sustain better readability of your document.

The following example illustrates the heading levels and how they are used to display a document's hierarchy. Figure 10.2 displays the rendered text.

<TITLE>WWW Database Developers Guide Using Visual Basic</TITLE>

<H2>Chapter 1. The Internet, World Wide Web and Intranets</H2>
<H3>A Little Internet Background</H3>
<H3>Internet History</H3>
<H3>Internet and Web Milestones</H3>
<H3>Internet and Web Growth</H3>
<H3>What is the World Wide Web</H3>
<H2>Chapter 2. Doing Business On The Web</H2>
<H3>Today's Competitive Business Environment</H3>
<H3>Why Do Business On The Web</H3>
<H3>What's Hot in Sales on the Web</H3>
<H3>The Role of Databases in Web Business Applications</H3>


FIGURE 10.2. Sample title and heading as displayed on the Web browser.

In some cases, the first heading used in the document and the title are identical. However, in multisectioned documents, the title tag should refer to the document as a whole, and the first-level header would be used to identify major topics. Within the document, subtopics could then be further identified with subsequent header levels.

TIP: Because graphical Web browsers display the header levels differently (that is, varying fonts, point sizes, colors, and so on), you may need to experiment with each heading to get the sizing you want for your document and to ensure that it will display as desired on the major graphical browsers in use. In text browsers, however, the point size remains unchanged by a heading.

Paragraphs: The <P> Tag

The <P> tag is used to separate paragraphs within the HTML document. Without the <P> tags in their proper locations, the displayed document becomes one large paragraph.

For example, consider text that is formatted as follows:

<TITLE>WWW Database Developers Guide Using Visual Basic</TITLE>


<H4>A Guide To Developing Visual Basic Applications For Database
Access via the WWW</H3>

<P>This is paragraph #1.

This is paragraph #2.</P>


The Web browser would display the text as one continuous paragraph with word wrapping, as shown in Figure 10.3.

FIGURE 10.3. Incorrect paragraph formatting.

A Web browser starts a new paragraph only when it reaches a new <P> tag in the source HTML document.

TIP: As a matter of style, and to preserve readability in HTML source files, headings should be placed on separate lines, and paragraphs should be separated by blank lines.

To repair the previous example, you would add <P> tags around each of the paragraphs to separate them appropriately, as shown here. Figure 10.4 shows the results.

<TITLE>WWW Database Developers Guide Using Visual Basic</TITLE>


<H4>A Guide To Developing Visual Basic Applications For Database
Access via the WWW</H4>

This is paragraph #1.</P>

This is paragraph #2.</P>


FIGURE 10.4. Correct paragraph formatting.

Web browsers ignore all indentations, extra white spaces, carriage returns, and blank lines in the source document because HTML relies almost entirely on the tags for formatting instructions.

CAUTION: Carriage returns in HTML files are insignificant to the Web browser. Word wrapping is handled automatically by the Web browser and can occur at any point in the source file.

Fortunately there are additional tags described subsequently that allow for special formatting such as indention and blank lines.

NOTE: The preformatted tag enables you to make formatted text display the same way in both the source document and the Web browser. See the <PRE> tag description later in this chapter.

Anchors: The <A> Tag

The <A> (anchor) tag is used to provide links from the current location in a document to other subsections within the same document as well as to other documents, images, audio, application programs, and so on, many of which may reside on other machines (local or remote). The Web browser highlights these links (usually with color and/or underlining) to indicate that they are hypertext links. Linking to Another Document The syntax for linking to a document on another machine is as follows:

<A HREF="resource://host.domain[:port]/path/filename"> Text to be hyperlinked</A>

Here is an actual hypertext link example from the United States Department of State's HEROES home page:

U.S. Government information regarding WANTED terrorists can be found at the
U.S. Department of State's <A HREF="">
Counter-Terrorism Rewards Program</A> Homepage.</P>

In this example, the text Counter-Terrorism Rewards Program is enclosed within the anchor tag and would be displayed to the user as a hypertext link, highlighted in a different color, to identify it as a link to the referenced document. The user clicks the hypertext link, and the Web browser connects to the Web server (in this case After downloading the source HTML document, the Web browser reformats and presents the document to the reader.

CAUTION: Earlier releases of Web browsers allowed ill-formatted anchor hypertext reference lines (such as those with a missing end quote after the document name) to be interpreted and handled under the assumption that the close anchor identified the end of the document name. However, as Web browsers become more refined and as HTML standards become more defined, this won't be the case. For example, the current Netscape Navigator release 4.0 fails to interpret and display such ill-formatted tags.

Hypertext references can be in the form of either relative (relative to the document that references it) or absolute (full directory) pathnames. The general rule is that you should use relative links when possible because it simplifies Website administration by making it easier to move groups of documents to another physical storage location (for example, a different file system or directory) or Web server without requiring the links to be updated.

Here is an example of a relative hypertext reference:

<A HREF="filename.html">This is a relative link</A></P>

Notice that there is no reference to the resource, host.domain, port, or the directory in this example. The Web browser would know that the document is located in the same directory as the calling document.

Now, here's an example of an absolute reference:

<A HREF="/examples/filename.html">This is an absolute link</A></P>

You can see that the directory of the document, /examples/ is referenced in the hypertext link. The Web browser would know that the location of the document is absolute from the Web server's root directory.

NOTE: The Web server can be configured to support aliases (alternative, usually shorter, names that can be used in place of longer names) that enable the location of a file or directory to be moved without having to change the actual HTML documents that reference the moved files or directories.

Linking to a Specific Location Within the Same Document Anchors can also be used to link to a specific location within a document. The syntax for linking to a specific location within the same document is as follows:

<A HREF="#named anchor">Text to be hyperlinked</A>

For example, suppose that you want to include a hypertext link at the top of your document that references material (say a subsection) further down in the document. To do this, you would set up your named anchor as in the following example:

<TITLE>Named Anchor Example</TITLE>
<H1>WWW Database Developers Guide Using Visual Basic</H1>
<A HREF="#Chapter 1">
<H2>Chapter 1. The Internet, World Wide Web and Intranets</H2></A>
<H3>A Little Internet Background</H3>
<H3>Internet History</H3>
<H3>Internet and Web Milestones</H3>
<H3>Internet and Web Growth</H3>
<H3>What is the World Wide Web</H3>
<A HREF="#Chapter 2">
<H2>Chapter 2. Doing Business On The Web</H2></A>
<H3>Today's Competitive Business Environment</H3>
<H3>Why Do Business On The Web</H3>
<H3>What's Hot in Sales on the Web</H3>
<H3>The Role of Databases in Web Business Applications</H3>

The # used within the HREF attribute of the anchor tag identifies the text that follows it as a named anchor. Note that the anchor is placed inside double quotation marks.

The next step is to add the named anchors at the appropriate locations within your document, making certain you use the same anchor name you referenced in the HREF line. You do this using a slight variation of syntax: you use NAME instead of HREF to identify this position in the document as the place to "jump to" when the hypertext link referencing it is clicked. Here's an example:

<A NAME="Chapter 1"><H2>Chapter 1. The Internet, World Wide Web and Intranets</A> </H2>

Here, a named anchor for Chapter 1 is created, called "Chapter 1".

NOTE: When specifying a named anchor, the closing </A> tag is not required because the anchor is not a hypertext link. It's just a location identifier within a document. However, it's good authoring practice to use the </A> closing anchor tag.

Linking to a Specific Location Within Another Document Linking to a named anchor within another document simply requires adding the document name before the named anchor in the HREF attribute of the anchor tag establishing the link. Say you wanted to reference the actual text of Chapter 1 (which is assumed to be in another document called chap1.html) from within the book outline. To do this, you just modify the reference line with the named anchor as follows:

<A HREF="chap1.html#Chapter1">1. The Internet, World Wide Web, and Intranets</A>

When the reader clicks on the words The Internet, World Wide Web, and Intranets in the outline, the Web browser downloads the file chap1.html and takes the reader directly to the named anchor "Chapter1" in chap1.html.

Lists: The <LI> Tag

The <LI> (list item) tag is used to identify and group a list of items within a document. Lists will appear in the displayed document indented and with one list item per line. The <LI> tag is used in conjunction with the <OL> and <UL> tags described later.

NOTE: The <LI> tag is an example of an HTML tag that does not require an ending </LI> tag. The Web browser assumes that the next list item or closing list tag (</OL> or </UL>) identifies the end of any previous list item.

Ordered Lists: The <OL> Tag

The <OL> (ordered list) tag is used to identify those list items that should be automatically numbered by the Web browser when displayed. All list items within the start and end <OL> tags must begin with the <LI> tag.

The following code shows sample HTML code with <OL> and <LI> tags. Figure 10.5 shows how the formatted list looks onscreen.

<TITLE>WWW Database Developers Guide With Visual Basic</TITLE>


<H3>A Guide To Developing Visual Basic Applications For Database
Access via the WWW</H3>

   <LI><A HREF="#Chapter1">The Internet, World Wide Web and Intranets</A></LI>
   <LI><A HREF="#Chapter2">Doing Business on the Web</A></LI>
   <LI><A HREF="#Chapter3">Client/Server Computing</A></LI>

Notice that the Web browser automatically indented and numbered each of the list items.

FIGURE 10.5. Ordered list example.

Unordered Lists: The <UL> Tag

The <UL> (unordered list) tag is used to identify list items that should be grouped together. Unlike <OL> list items, however, these list items are not numbered. All list items within the start and end <UL> tags must begin with the <LI> tag.

The following code shows how the <OL> tags example shown earlier would look using <UL> tags instead. Figure 10.6 shows how the formatted list looks onscreen.

<TITLE>WWW Database Developers Guide With Visual Basic</TITLE>


<H3>A Guide To Developing Visual Basic Applications For Database
Access via the WWW</H3>

   <LI><A HREF="#Chapter1">The Internet, World Wide Web and Intranets</A></LI>
   <LI><A HREF="#Chapter2">Doing Business on the Web</A></LI>
   <LI><A HREF="#Chapter3">Client/Server Computing</A></LI>

FIGURE 10.6. Unordered list example.

Notice that the Web browser used bullets instead of numbers.

Preformatting Text: The <PRE> Tag

The <PRE> (preformatted) tag allows the generation of source HTML documents that will maintain the same formatting when interpreted and displayed by the Web browser. All white spaces, carriage returns, and linefeeds in your document that are enclosed within the <PRE> and </PRE> tags will be retained by the Web browser.

CAUTION: When using preformatted text, be careful of the length of your document text because no word wrapping is forced by the browser. This could require the end user to scroll to the right to see all of the text.

Preformatted text is rendered in a monospaced font. You could, for instance, have your database output generated in table form and enclosed within <PRE> tags.

The following code shows a sample database query result using the <PRE> tag. Figure 10.7 shows how it is formatted onscreen.

<!-- PRE Tag Example -->
<!-- Author:  Mark Swank -->
<!-- Revision History:  1 January 1997 -->
<TITLE>Swank Family</TITLE>

<H2>Swank Family</H2>

First Name   MI   Last Name     Relationship
----------   --   ----------    ------------
Daniel       W.   Swank         Father
Helen        L.   Worthington   Mother
Charles      E.   Swank         Son
Jane         A.   Wendt         Daughter
June         A.   Laubach       Daughter
Robert       W.   Swank         Son
Roberta      J.   Davis         Daughter
Sherry       D.   Coonan        Daughter


FIGURE 10.7. Preformatted text example.

Line Breaks: The <BR> Tag

The <BR> (line break) tag has no closing tag. The <BR> tag is used to provide the HTML writer the ability to force a line break at a given point in the text. Text following the <BR> tag will be started at the left margin of the next line.

Horizontal Rules: The <HR> Tag

The <HR> (horizontal rule) tag is used simply to place a horizontal line on the document. Most Web authors use horizontal rules to separate specific sections of their documents. For example, the following code shows how to use the horizontal rule to break up the sections of a document:

<TITLE>Example Horizontal Rule</TITLE>
<H3>Section Summary</H3>


<H2>II. Architectural Overview</H2>

Markup Tags (Level 1)

Level 1 tags include those tags that support character formatting. These tags include support for text bolding, emphasis, monospace fonts, and so on:

Tag Description
<B> Delimits bold text.
<EM> Places emphasis on text and is displayed as italic text.
<I> Delimits italic text.
<STRONG> Places strong emphasis on text and is displayed as bold text.
<TT> Delimits teletype font text.

NOTE: The <I> and <B> tags are being replaced with the <EM> and <STRONG> tags, respectively. Although the <I> and <B> tags are still supported, it is recommended that you begin using the <EM> and <STRONG> tags.

Here is a combined example showing the different character formatting HTML tags discussed in this section. Figure 10.8 displays the rendered text.

<!-- Character Formatting HTML Tags Example -->
<!-- Author:  Mark Swank -->
<!-- Revision History:  1 January 1997 -->
<TITLE>Character Formatting HTML Tags Example</TITLE>

<H2>Character Formatting HTML Tags Example</H2>

Here is an example of how to break<BR>
text and force continuation on the next<BR>
line without wrapping.  This is accomplished<BR>
by adding the "break line" tag.</P>

<STRONG>Strong text looks like this.</STRONG></P>

<B>Bold text looks like this.</B></P>

<EM>Emphasized text looks like this.</EM></P>

<I>Italicized text looks like this.</I></P>

<TT>Teletype text looks like this.</TT></P>

FIGURE 10.8. Example of character-formatting HTML tags.

Inline Images: The <IMG> Tag

The image tag is used to display inline images. These inline images can serve many purposes--such as providing smaller (sometimes called thumbnail) images that are hypertext linked to a larger image, hypertext images that can appear as window selection buttons, and image maps that allow the browser to retrieve a specific document based on the location within the image that the end user selected.

NOTE: See the section titled "Handling Images" later in this chapter for a discussion on image sizing.

The image tag attribute ISMAP, when used with an image map file, enables the Web client to identify specific locations within an image that the user has clicked.

TIP: Image maps are a great front-end resource for point-and-click database access. A sample application is one in which a user clicks a specific state on a map of the United States and a database query for statistical information about that state is executed.

Image maps can be generated easily by map-editing software.

RESOURCE :Here are just a few programs available for editing image maps:
Program Location

HTML 2.0 Specifications

The basic introduction to HTML in this chapter covered those features of HTML found in Levels 0 and 1. With the proliferation of graphics-capable Web browsers such as Microsoft Internet Explorer, Netscape Navigator, and NCSA Mosaic, came the need to provide a means for interacting with the user. The main feature of the HTML Level 2.0 specification, and the method to support such interaction with the user, is the use of forms.

Forms are HTML documents that include user-input objects that provide an input method by which the user can interact with remote server and applications programs. Users can now use forms interfaces to communicate with remote services and applications such as online registration services, order-entry systems, user surveys, and so on. The number of uses for forms-based applications is endless.

This section introduces the <FORM> tag and its attributes. The next chapter covers it in greater depth and provides examples of each of the form attributes and form tag elements that enable the user to render input via form widgets, such as the following:

Forms: The <FORM> Tag

The <FORM> tag pair is used to identify an area within the HTML document that will include the user-input objects. The values of objects included within the <FORM> tag pair will be sent to the ACTION attribute for the form, as mentioned later. The syntax of the form tag is as follows (its attributes are described in the following sections):

<FORM METHOD="method" ACTION="action" ENCTYPE="enctype"></FORM>

METHOD Attribute The <FORM> tag METHOD attribute is the method used to submit the form for processing. There are two valid choices for the METHOD attribute: GET and POST.

GET is the default method; it causes the form contents to be appended to the URL, as in the case of a normal query. POST causes the form contents to be sent to the processing server in a data body rather than as part of the URL. ACTION Attribute The <FORM> tag ACTION attribute is the URL of the processing server to which the form contents will be submitted.

Here is an example of the GET method's ACTION attribute:

<FORM METHOD="GET" ACTION="/cgi-bin/process_form?user=mark"></FORM>

Here is an example of the POST method's ACTION attribute:

<FORM METHOD="POST" ACTION="/cgi-bin/process_form"></FORM>

ENCTYPE Attribute The <FORM> tag ENCTYPE attribute specifies the encoding to be used for the form contents. This attribute is generally omitted because it applies only if the METHOD is set to POST. Here is a FORM ENCTYPE attribute example:

<FORM METHOD="POST" ACTION="/cgi-bin/process_form"

Whats New in HTML 3.2

Many changes in the current 2.0 specification are implemented in the HTML 3.2 specification. One of the major proposed changes in the HTML specification under Level 3.2 is the addition of the <TABLE> tag. Database application developers will find this tag to be a great mechanism for formatting and presenting data in a familiar row-column approach.

Tables: The <TABLE> Tag

The <TABLE> tag is used to generate a row-cell matrix within the document. Cells may contain objects such as text, images, anchors, and so on. The table tag supports the following tag elements:

<TR> Defines a new table row

<TH> Defines a column header (caption)

Defines the data (object) within a cell

The following sections describe the attributes for the <TABLE> tag. BORDER The BORDER attribute is used to indicate whether the table should be rendered with or without borders drawn around all table cells. If specified, the BORDER value specifies the border width as a number followed by an optional suffix. The standard units for widths are specified using the suffixes shown in Table 10.1.

Table 10.1. Standard Units for Widths.

Suffix Unit
pt Denotes points
pi Denotes picas
in Denotes inches
cm Denotes centimeters
mm Denotes millimeters
em Denotes em units (equal to the height of the default font)
px Denotes screen pixels

The default units are screen pixels. The number is an integer value or a real-valued number such as "2.5". The default is for no borders to be rendered. Here is a sample BORDER attribute specifying a border width of 2 centimeters:



The ALIGN (horizontal alignment) attribute determines the appearance of objects based on the table tag element in which the ALIGN attribute appears. If used within the <CAPTION> element, the ALIGN attribute controls whether the caption is displayed above or below the table. If used within the <TR>, <TH>, or <TD> elements, it controls whether text inside the table cells will be left-justified, right-justified, or centered. VALIGN The VALIGN (vertical alignment) attribute is used within the <TR>, <TH>, and <TD> table tag elements and controls whether text inside the table cells will be aligned to the top of the cell, the bottom of the cell, or vertically centered within the cell. It also can specify that all the cells in the row should be vertically aligned to the same baseline. NOWRAP The NOWRAP attribute can be used to signify that lines within a cell cannot be wrapped to another line in order to fit the width of the cell.

CAUTION: The use of the NOWRAP attribute forces each line to its full width in order to fit the entire object within the cell. This may cause excessively wide cells.


The COLSPAN attribute is used within the <TD> and <TH> elements; it is used to specify how many columns the cell should span. The default COLSPAN is 1. ROWSPAN The ROWSPAN attribute is used within the <TD> and <TH> elements; it is used to specify how many rows the cell should span. The default ROWSPAN is 1.

NOTE: If a row span causes the row to extend into rows that were never specified with a <TR> tag, the row will be truncated.

Table Example

Let's look at an example of a simple table. Don't be alarmed when you see tags in this example that haven't been covered yet. These new tags are important for illustrating the capabilities of a table. Some of the tags are Netscape extensions. The next section, "Netscape Extensions," provides the details for all table tags, and more information is provided in Chapter 11, "Developing HTML Forms for Database Access and Application Interfaces."

<!-- HTML Level 3 Table Example -->
<!-- Author:  Mark Swank -->
<!-- Date created:  1 January 1997 -->
<TITLE>HTML Level 3.2 Table Example</TITLE>

<H1>HTML Level 3.2 Table Example</H1>

<TH ALIGN="CENTER">Product Line</TH>
<TH ALIGN="CENTER">Units Sold</TH>
<TH ALIGN="CENTER">Unit Price</TH>
<TH ALIGN="CENTER">Total Sales</TH>

<TR><TD>CDROM Drives</TD>

<TR><TD>Hard Drives</TD>




<P>NCSA offers an online
<A HREF="">
table tutorial</A>.

<A HREF="">Mark A. Swank</A><BR>
<A HREF=""></A>


Figure 10.9 shows what the formatted table looks like onscreen.

FIGURE 10.9. HTML 3.2 table example.

Netscape Extensions

Netscape Navigator supports many additional extensions to both the HTML 2.0 and 3.2 specifications. Other major browsers, such as Microsoft Internet Explorer, also support the majority of the Netscape extensions. To date, it has been Netscape's driving force that has led to many of the changes in both the 2.0 and 3.2 specifications. This section presents some of the major Netscape extensions, such as the use of color attributes, background images, and additional supported horizontal rule attributes.

The <BODY> Tag

The <BODY> tag is used to identify HTML elements that compose the body of the document. The <BODY> tag also includes several attributes that support formatting such as background images, background color, and text color. The following sections describe each of the <BODY> tag attributes. Background Images The HTML author has the option of adding a background image to the document. This image is visible by graphics-capable browsers only and is rendered by modifying the <BODY> tag as follows:

<BODY background="image_url">

Here, image_url points to a valid graphic image that will be tiled across the browser background. Background Color The background color attribute is specified as bgcolor and is used to specify a solid background color to be use for the document.

NOTE: Color attributes are referenced in hexadecimal (#RRGGBB) format. Red, green, and blue (RGB) values are used to identify the specific color combinations that produce the desired color.

For example, you could use the following tag, where #FFFFFF is a solid white background:

<BODY bcolor="#FFFFFF">

TIP: If you are a Microsoft Windows user, you can determine the RGB values for a color as follows:
Windows 3.1 Select Control Panel | Color | Define Custom Colors. Select a custom color from the Color Palette and the appropriate RGB values will be displayed for that color.
Windows 95 Select Control Panel | Display | Appearance | Color | Other. Select a custom color from the Color Palette and the appropriate RGB values will be displayed for that color.

Text Color

The text color attribute is specified as text and is used to specify a text color to be use for the document. The reference must be in hexadecimal (#RRGGBB) format, where #FF0000 would generate red text:

<BODY text="#FF0000">

Link Color The link color attribute is specified as link and is used to specify a color to be used for links within the document. The reference must be in hexadecimal (#RRGGBB) format, where #FF0000 would generate red link text:

<BODY link="#FF0000">

Visited Link Color The visited link color attribute is specified as vlink and is used to specify a color to be used for visited links within the document. The reference must be in hexadecimal (#RRGGBB) format, where #FF0000 would generate red link text:

<BODY vlink="#FF0000">

Active Link Color The active link color attribute is specified as alink and is used to specify a color to be used for active links within the document. The reference must be in hexadecimal (#RRGGBB) format, where #FF0000 would generate red link text:

<BODY alink="#FF0000">

The <HR> Tag

The <HR> tag is used to specify placement of a horizontal rule. A horizontal rule is simply a horizontal line that can be of varying sizes and widths. The following sections describe each of the <HR> tag attributes. size The size attribute specifies the thickness to be used for the horizontal rule. The value of size is specified using the standard units of width, as noted in Table 10.1.

<HR size="3">


The noshade attribute is used to turn off horizontal rule shading. Shading is used to give the horizontal rule a three dimensional look.

<HR noshade>


The width attribute specifies the width of the horizontal rule. The value is specified using the standard units of width, as noted in Table 10.1. There is no range of values for the width of a horizontal rule. If specified using any unit other than percent (%), the horizontal rule can exceed and wrap around to the next document line. Here is a sample width attribute specifying the horizontal rule to consume 80 percent of the document width:

<HR width="80%">


The align attribute specifies the alignment of the horizontal rule. The values must be one of left, right, or center.

<HR align="left">
Horizontal Rule Example

As you can see, horizontal rules can be specified with many combined attributes to produce varying shapes and sizes. Here is a sample horizontal rule document that shows several ways to display horizontal rules. Figure 10.10 displays the rendered text.

<!-- HTML Horizontal Rule Example -->
<!-- Author:  Mark Swank -->
<!-- Revision History:  1 January 1997 -->
<TITLE>Horizontal Rule Example</TITLE>

<H3>Horizontal Rule Example</H3>

<HR size="4">

<HR size="8">

<HR noshade>

<HR width="50%">

width=50% align=left
<HR width="50%" align="left">


The horizontal rule is not always visible when using colored backgrounds that blend with the same color scheme. Additionally, certain graphic backgrounds, such as those with lined images, can "hide" the rule from the naked eye.

FIGURE 10.10. Horizontal rule example.


The <BASEFONT> tag is used to specify the base font size that the remainder of the document font attributes will use as a reference. There is currently only one attribute available for use with the <BASEFONT> tag: the size attribute. size The size attribute to the base font tag changes the current font size to a specified number. The number must be in the range of 1-7. Here is an example:

<BASEFONT size="1">

Blinking Text: The <BLINK> Tag

The <BLINK> tag generates blinking text for everything contained within the <BLINK> and </BLINK> tag pairs. There is no way to control the rate at which the blinking occurs:

<BLINK>This is blinking text</BLINK>

TIP: Most developers will agree that the <BLINK> tag can be somewhat obnoxious. However, there are occasions when the tag is useful. For example, you can enclose error-text strings within <BLINK> tags to make the text more identifiable.

Centering: The <CENTER> Tag

The <CENTER> tag causes all objects (text, images, and so on) contained between the <CENTER> and </CENTER> tag pairs to be centered:

<CENTER>This is centered text<CENTER>

Images: The <IMG> Tag

The <IMG> tag is used to specify attributes for an image that will be displayed within your document. The align attribute is the only <IMG> tag attribute. align The align attribute specifies the location of the image in relation to the object following it. The valid values for the align attribute are right, top, texttop, middle, absmiddle, baseline, bottom, and absbottom. Here is an example that would place the object following the image centered on the image:

<IMG align="center" src="image_source_url">

Tables: The <TABLE> Tag

Included in the Netscape extensions are three new table tag attributes. These attributes can be used to specify the width, cell spacing, and cell padding of the table. The following sections describe each of the <TABLE> tag attributes. width The width attribute specifies the width of the table border in standard unit widths:

<TABLE width="2cm">


The cellspacing attribute specifies the space around the table cells specified in standard unit widths:

<TABLE cellspacing="1">

The cellpadding attribute specifies the space (specified in standard unit widths) in the data cells:

<TABLE cellpadding="3pi">

HTML Style Guides

It must first be said that there are no defined standards of HTML authoring style. That's why these are called guides and not standards. Having said that, and after surfing the WWW quite a bit ourselves over the last few years, here are some of the notes we've taken pertaining to what the majority of Web authors consider to be good authoring practices.

Signing Your Documents

The general feeling is that all documents should be signed by their author so that the reader can formulate his or her own opinion as to the integrity of the document. Much like a signature block on a memo or the header of a document abstract, Web documents should identify the author.

HTML has a specific tag for specifying the author of a document. The <ADDRESS> tag is generally placed at the footer of the document (still before the </BODY> tag). A good practice is to add a Mailto anchor within your <ADDRESS> tag. The Mailto resource takes a Simple Mail Transfer Protocol (SMTP) mail address as its argument. When clicked, the anchor spawns an external mail application for the reader to generate an e-mail reply. Here is the signature block the author uses:

<A HREF="">Mark A. Swank</A><BR>
<A HREF=""></A>

Timestamp Your Documents

Another good authoring style is to timestamp all your documents. This identifies the date and time the document was last updated. Here is an example of a timestamp:

Last modified: <em>Wednesday, January 1, 1997 15:10p.m.</em>

TIP:You can automate the timestamp process by using a Server-Side Include command like this:
Last modified: <em><!--#echo var="LAST MODIFIED"-- ></em>

This will take the system timestamp of the last time the document was modified and return it to the Web browser for display.

Select a Good Title

Your title should refer to the document as a whole. Try to select a title that is short, yet addresses the content of your document. Remember, because indexing engines such as WAIS can use the title as the indexed value, a properly selected title is very important to both document identification and retrieval.

CAUTION: Because many applications will display document titles in window title bars and menus, the document title should ideally be fewer than 64 characters long.

Using Meaningful Links

Avoid at all costs the infamous "Click Here" link. Your hypertext links should relate to and possibly flow with the text content of your document. Generally, links that stand alone (those that are not included within the actual text of a sentence) should be short, succinct, and meaningful. Think of the text of your document as something you would want to be able to print and give to someone in paper form. You can't "click here" on paper.

Outline Your Documents When Possible

By using header tags, you can properly outline your document. The ultimate purpose of headers is not to provide a mechanism for changing the font or layout of your document, but rather to provide a standardized means for identifying components of your document.

Headings should follow the depth of your document, and you shouldn't skip heading levels as you go deeper into your document hierarchy. For example, your document should not contain an <H2> tag immediately followed by the <H5> tag for subsections.

Because Web browsers already place emphasis on headings using <H#> tags, you shouldn't use highlighting elements within a header. Such elements would include the <B> (bold) and <EM> (emphasize) tags.

Handling Images

Keep the size of your images to a minimum. Graphics Interchange Format (GIF) images have a maximum of 256 colors and therefore are not always best suited for high-resolution images. The Joint Photographic Experts Group (JPEG) format allows for much better image compression and can support more than 16 million colors.

Don't force readers to view an entire image if there's a good chance that they might not want to see it. Using much smaller thumbnail images is a very common practice for accessing larger images through hypertext links that can be expanded to full resolution when clicked. You may even choose to use simple hypertext links as a means for accessing images. By using this method, the end user isn't forced to download the image or thumbnail at all.

Use the ALT attribute when specifying images. This allows both text-only users and users with image-downloading turned off to get alternate text. Here's an example:

<IMG SRC="" ALT="[Next Page]">

Text-only browsers would display [Next Page], whereas graphical browsers would display the actual image.

HTML Editors and Tools

HTML editors are programs that allow the user to create and edit HTML documents with little knowledge of the HTML specifications. The editor handles the validity of the tag in relation to its location within the document. HTML tools are programs that facilitate the conversion of documents to and from HTML format. Numerous HTML editors and tools are available today, and it would take several chapters to cover them all. For the sake of saving a tree, this section covers only a few of the products within each section: Internet assistants for Microsoft Office, shareware HTML editors, and commercial HTML editors.

RESOURCE: For an updated listing and review of available HTML editors and tools, see the HTML Editors Review home page:

Internet Assistants for Microsoft Office

Microsoft Corporation offers free add-ins to the Microsoft Office family of applications. These add-ins are designed to help individuals and businesses create and edit documents for the Web quickly and easily.

RESOURCE: All of these products are available for downloading from the Microsoft Download home page at

The following sections provide a quick review of the Microsoft products currently available. Internet Assistant for Microsoft Word Internet Assistant for Microsoft Word assists you in creating HTML documents from within Microsoft Word. The product automatically converts existing Word documents to HTML format, including text, graphics, and tables. It provides an interface to add special formatting such as Marquee text, Inline Video, and background sounds.

RESOURCE: You can download Internet Assistant for Microsoft Word from the following address:

Internet Assistant for Microsoft Excel Internet Assistant for Microsoft Excel automatically converts an Excel spreadsheet to an HTML table, complete with background colors. Examples of converting Excel spreadsheets into HTML format are provided in Chapter 15, "Creating ActiveX Documents for the Web with VB 5."

RESOURCE: You can download Internet Assistant for Microsoft Excel from the following address:

Internet Assistant for Microsoft PowerPoint Internet Assistant for Microsoft PowerPoint converts existing PowerPoint slides into HTML-formatted pages. Additionally, this product automatically sets up hypertext links between your PowerPoint slides and generates image maps as needed.

RESOURCE: You can download Internet Assistant for Microsoft PowerPoint from the following address:

Shareware HTML Editors

Shareware editors are in abundance on the Internet. Many are very good and are well worth the minimal registration or usage fees associated with them. Most shareware products allow you to "try-on-the-fly" for a period of 30-90 days. The CD-ROM accompanying this book contains the current release (as of the printing of this book) of as many products mentioned as possible. HoTMetaL PRO 3.0 HoTMetaL PRO was chosen the best HTML authoring tool for the World Wide Web by PC Magazine. HoTMetaL PRO 3.0 has a rich suite of editing tools with unique features designed especially for generating and testing HTML files. Version 3.0 includes an improved and more powerful import filter that enables you to import and convert documents created in other popular packages such as Microsoft Word, WordPerfect, and Lotus Ami Pro. Additional features, such as drag-and-drop editing, make designing Web pages even easier for all Web developers.

RESOURCE: An unsupported version of HoTMetaL PRO 3.0 can be downloaded from the following address:

HTML Assistant HTML Assistant is available both as shareware (HTML Assistant) and as a retail product (HTML Assistant Pro). This product was one of the first HTML editors on the market. It enables you to validate and test your work as well as organize and keep track of the Internet resources that you use.

RESOURCE: The shareware version is available from the following address:

WebEdit 2.0 WebEdit 2.0 is an easy-to-use HTML editing product. Its ease of use and rich editing features make it one of the best shareware interfaces available. Netscape extensions and HTML 3.2 support is included.

RESOURCE: WebEdit 2.0 can be downloaded from the following address:

WebElite WebElite is a 32-bit Windows application that can create powerful forms and tables as well as color-coordinated pages. WebElite has a built-in HyperCritical syntax checker that does not allow the insertion of any unnecessary tags or information.

RESOURCE: You can download WebElite from the following address:

Commercial HTML Editors

Commercial HTML editors are quickly becoming widely available on all platforms. This section focuses on a few of the products that are in wide use and easily available for downloading and evaluation. HTMLed Pro 1.1 HTMLed Pro is a very stable product that provides syntax highlighting (tags, text, and entities in different colors). It also offers table and forms editors, a customizable tool bar, the capability to open and save HTML documents from a remote server, and a suite of document templates. HTML 3.2 and Netscape extension support is included.

RESOURCE: You can download a time-limited demo of HTMLed Pro 1.1 from the following address:

HotDog Pro 3.0 HotDog Pro is a fast, flexible, and user-friendly HTML editor with new enhancements such as previewing, table editing, and HTML checking.

RESOURCE: You can download a functional demonstration of HotDog Pro from the following address:

Web Media Publisher Pro Web Media Publisher Pro is a 32-bit Windows application that supports HTML 3.2, Netscape 2.0 extensions, and Microsoft Explorer features. Support for Java script editing is included. This package includes a Web timer for monitoring time spent authoring.

RESOURCE:You can download Web Media Publisher Pro for evaluation from the following address:

Microsoft FrontPage Microsoft FrontPage is a commercially available client/server application that supports authoring, scripting, and Web-site management from a user's desktop, across a corporate LAN, or over the Internet. FrontPage includes an editor for creating and editing HTML pages, an add-in for graphically visualizing and managing complex Web sites, an add-in that includes text-search capabilities and discussion forums, an add-in for wizards and templates to help you create HTML pages, and finally an add-in for management and tasking to track the status of authoring tasks.

RESOURCE: For more information about FrontPage, visit the following address:

HTML Translator/Conversion Programs

HTML conversion programs (filters) come in many different flavors, supporting a variety of formats. To review each one would be an enormous task, so this section lists only some of the shareware and commercially available filters, which are divided into the following categories:

  • Word processor filters

  • Plain-text filters

  • Programming language filters

  • Manual page filters

  • Mail filte

  • Frequently Asked Question filters

Word Processor Filters

Numerous filters are available for a variety of word processing formats. They are grouped into their respective formats for easy referencing in this section. PostScript PostScript filters can take a standard PostScript file and convert it into an HTML document. Here are URLs for two such filters:

Program Program URL

Multiple Word Processor Formats Many filters have been written that support multiple word processor formats. Filters such as these can convert multiple formats such as Microsoft Word, WordPerfect, and Rich Text Format documents into HTML files. Here's a list of URLs:
Program Program URL
Html Transit
Web Publisher

Microsoft Word HTML Editors/Converters Several programs are available that allow the editing or converting of documents formatted with Microsoft Word into HTML format via Word macros. The process is as simple as generating or importing the document into Word format, running the Word macro, and then saving the document in HTML format. Here's a list of a few programs available that provide this capability:
Program Program URL
Easy Help/Web

WordPerfect Macros Several programs are available that convert documents formatted with WordPerfect into HTML format via WordPerfect macros. Here are some examples:

Program Program URL

FrameMaker Converters are available for translating FrameMaker files in FrameMaker document format or FrameMaker Interchange Format (MIF). Some of these programs also convert book files and tables as well as just text. Here are some examples:
Program Program URL

LaTeX LaTeX converters re-create the basic structure of LaTeX documents by generating navigation panels. Cross-references, citations, and footnotes are converted into hypertext links. Formatting information, such as mathematical equations and pictures, is converted into images that are automatically placed in the hypertext document. Here's a list of a few LaTeX translators:

Program Program URL

PageMaker PageMaker translators are available that convert PageMaker stories into HTML files. Some include features such as automatic creation of a table of contents, story categorization, and image linking. Here are some PageMaker translators:

Program Program URL

Plain-Text Filters Plain-text filters take simple ASCII text files and convert them into HTML-formatted documents. In most cases, these filters simply provide paragraph formatting beyond the normal header information. Here are some plain-text filters:

Program Program URL

Programming Language Filters

Programming language source files can be converted into HTML markup. Most converters use HTML named anchors to identify references such as structures, functions, definitions, and so on. These types of converters are mainly for the purpose of reading source code. Here's a list of some programming language filters:

Program Language Program URL
src2html C
ctohtml C
src2www C
c++2html C++
cxx2html C++
ObjectManual C++
ctoohtml C++
Root C++
src2www ADA
lisp2html LISP

Manual Page Filters

Manual page filters convert standard UNIX manual pages into HTML-formatted documents. Some filters include features such as hypertext links to other manual page references, on-the-fly conversions to alleviate the need for preformatted pages, forms interfaces, and keyword searches. Here are some shareware/freeware manual page filters:

Program Program URL

Mail Filters

Mail filters provide facilities for converting SMTP mail into HTML documents. Some of the features of available mail filters include mail archiving, mail thread linking, and MIME support. Here are some shareware/freeware mail filters:

Program Program URL

Frequently Asked Questions Filters

Frequently Asked Questions (FAQ) filters can convert FAQ files that are in a standard format into HTML. Although some filters support the conversion of nonstandard FAQ format, most do not. A few of the major features supported by most FAQ filters include URL hypertext link recognition, e-mail addressee to Mailto links, character translations (such as converting the * character into a bullet), automatic generation of horizontal rules for section dividers, generation of a table of contents with hypertext links to subjects, and so on. Here are two FAQ filters:

Program Program URL

Benefits of HTML

Probably one of the greatest advantages of HTML, and the one most overlooked, is its capability to provide a rapid development platform. Any user can be generating HTML documents almost immediately with little training. This ease of use has been the catalyst for the proliferation of HTML and the WWW.

Another major advantage of HTML is its cross-platform compatibility. Web browsers and servers have been ported to virtually every computing platform. For high-end multiprocessor UNIX servers and desktop personal computers in the home, you can find HTML editors, desktop tools, authoring software packages, and even computer-based training software to make creating HTML documents easy.

Finally, HTML provides a mechanism for bringing text, sounds, images, and video to the desktop in a single application. With a multiplatform audience, HTML has become the universal language for document formatting on the Internet.


This chapter provided information on basic HTML levels, tags, and features. It briefly discussed both the HTML Level 2 FORM tag and the HTML Level 3.2 TABLE tag. Following that, you learned about Netscape extensions and saw examples of each. Finally, the chapter closed with a discussion of some of the benefits of HTML.

This chapter also identified commercial software, shareware, and freeware that you can use to enhance your Web database development skills and productivity. You now should have a good understanding of the basic HTML framework necessary for you to work through the subsequent chapters, which begin to look closely at interfacing Visual Basic with WWW databases.