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.
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).
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).
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. |
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
resource://host.domain[:port]/path/filename
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 |
http://www.mcp.com/sams
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.
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.
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%>
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.
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:
<HTML> Other header and body tags </HTML>
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 -- >
<!-- 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.
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:
<HTML> <HEAD> Other header tags </HEAD> Some body tags and data </HTML>
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>
<TITLE>FY96 Sales Statistics</TITLE>
is a more identifiable title than something like
<TITLE>Stats</TITLE>
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 </BODY>
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.
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.
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.
<HTML> <HEAD> <TITLE>WWW Database Developers Guide Using Visual Basic</TITLE> </HEAD> <BODY> <H1>WWW DATABASE DEVELOPER'S GUIDE WITH VISUAL BASIC 5</H1> <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> </BODY> </HTML>
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.
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:
<HTML> <HEAD> <TITLE>WWW Database Developers Guide Using Visual Basic</TITLE> </HEAD> <H3>WWW DATABASE DEVELOPER'S GUIDE WITH VISUAL BASIC 5</H3> <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> </BODY> </HTML>
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.
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.
<HTML> <HEAD> <TITLE>WWW Database Developers Guide Using Visual Basic</TITLE> </HEAD> <H3>WWW DATABASE DEVELOPER'S GUIDE WITH VISUAL BASIC 5</H3> <H4>A Guide To Developing Visual Basic Applications For Database Access via the WWW</H4> <P> This is paragraph #1.</P> <P> This is paragraph #2.</P> </BODY> </HTML>
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.
Fortunately there are additional tags described subsequently that allow for special formatting such as indention and blank lines.
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:
<P> U.S. Government information regarding WANTED terrorists can be found at the U.S. Department of State's <A HREF="http://www.heroes.net/pub/heroes/"> 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 www.heroes.net). After downloading the source HTML document, the Web browser reformats and presents the document to the reader.
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:
<P> <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:
<P> <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.
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:
<HTML> <HEAD> <TITLE>Named Anchor Example</TITLE> <BODY> <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".
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.
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.
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.
<HTML> <HEAD> <TITLE>WWW Database Developers Guide With Visual Basic</TITLE> </HEAD> <H2>WWW DATABASE DEVELOPER'S GUIDE WITH VISUAL BASIC 5</H2> <H3>A Guide To Developing Visual Basic Applications For Database Access via the WWW</H3> <P> Chapters <OL> <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> </OL></P> </BODY> </HTML>
Notice that the Web browser automatically indented and numbered each of the list
items.
FIGURE
10.5. Ordered list example.
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.
<HTML> <HEAD> <TITLE>WWW Database Developers Guide With Visual Basic</TITLE> </HEAD> <H2>WWW DATABASE DEVELOPER'S GUIDE WITH VISUAL BASIC 5</H2> <H3>A Guide To Developing Visual Basic Applications For Database Access via the WWW</H3> <P> Chapters <UL> <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> </UL></P> </BODY> </HTML>
FIGURE 10.6. Unordered list example.
Notice that the Web browser used bullets instead of numbers.
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.
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.
<HTML> <!-- PRE Tag Example --> <!-- Author: Mark Swank --> <!-- Revision History: 1 January 1997 --> <HEAD> <TITLE>Swank Family</TITLE> </HEAD> <H2>Swank Family</H2> <PRE> 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 </PRE> </BODY> </HTML>
FIGURE 10.7. Preformatted text example.
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.
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:
<HTML> <HEAD> <TITLE>Example Horizontal Rule</TITLE> <P> <H3>Section Summary</H3> <HR> <P> <H2>II. Architectural Overview</H2> </BODY> </HTML>
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. |
Here is a combined example showing the different character formatting HTML tags discussed in this section. Figure 10.8 displays the rendered text.
<HTML> <!-- Character Formatting HTML Tags Example --> <!-- Author: Mark Swank --> <!-- Revision History: 1 January 1997 --> <HEAD> <TITLE>Character Formatting HTML Tags Example</TITLE> </HEAD> <BODY> <H2>Character Formatting HTML Tags Example</H2> <P> 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> <P> <STRONG>Strong text looks like this.</STRONG></P> <P> <B>Bold text looks like this.</B></P> <P> <EM>Emphasized text looks like this.</EM></P> <P> <I>Italicized text looks like this.</I></P> <P> <TT>Teletype text looks like this.</TT></P> </BODY> </HTML>
FIGURE 10.8. Example of character-formatting HTML tags.
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.
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.
Image maps can be generated easily by map-editing software.
Program | Location |
Mapedit | http://www.boutell.com/mapedit/ |
MapMaker | http://www.tns.lcs.mit.edu/cgi-bin/mapmaker |
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:
- Radio buttons
- Checkboxes
- Listboxes
- Text input
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" ENCTYPE="application/x-www-form-urlencoded"></FORM>
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.
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:
<TH> Defines a column header (caption)
<TD> 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 |
<TABLE BORDER="2cm">
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.
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.
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> <!-- HTML Level 3 Table Example --> <!-- Author: Mark Swank --> <!-- Date created: 1 January 1997 --> <HEAD> <TITLE>HTML Level 3.2 Table Example</TITLE> </HEAD> <BODY> <CENTER> <H1>HTML Level 3.2 Table Example</H1> <TABLE BORDER="1" ALIGN="Center" CELLSPACING="5" COLS="4"> <CAPTION><STRONG>Product Sales</STRONG></CAPTION> <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> <TD>100</TD> <TD>$295</TD> <TD>$29,500</TD></TR> <TR><TD>Hard Drives</TD> <TD>200</TD> <TD>$500</TD> <TD>$50,000</TD></TR> <TR><TD>Modems</TD> <TD>50</TD> <TD>$100</TD> <TD>$5,000</TD></TR> <TR><TD>Speakers</TD> <TD>50</TD> <TD>$50</TD> <TD>$2,500</TD></TR> </TABLE> </CENTER> <P>NCSA offers an online <A HREF="http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/Tables/tutorial.html"> table tutorial</A>. <HR> <ADDRESS> <A HREF="http://www.clark.net/~mswank">Mark A. Swank</A><BR> <A HREF="mailto:mswank@clark.net">mswank@clark.net</A> </ADDRESS> </BODY> </HTML>
Figure 10.9 shows what the formatted table looks like onscreen.
FIGURE
10.9. HTML 3.2 table example.
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 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.
For example, you could use the following tag, where #FFFFFF is a solid white background:
<BODY bcolor="#FFFFFF">
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. |
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">
noshade
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%">
align
The align attribute specifies the alignment of the horizontal rule. The values must be one of left, right, or center.
<HR align="left">
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 --> <HEAD> <TITLE>Horizontal Rule Example</TITLE> </HEAD> <BODY> <CENTER> <H3>Horizontal Rule Example</H3> </CENTER> size=4 <HR size="4"> size=8 <HR size="8"> noshade <HR noshade> width=50% <HR width="50%"> width=50% align=left <HR width="50%" align="left"> </BODY> </HTML> <HTML>
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">
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>
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>
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">
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">
cellpadding
The cellpadding attribute specifies the space (specified in standard unit widths) in the data cells:
<TABLE cellpadding="3pi">
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.
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:
<ADDRESS> <A HREF="http://www.clark.net/~swank">Mark A. Swank</A><BR> <A HREF="mailto:mswank@clark.net">mswank@clark.net</A> </ADDRESS> </BODY> </HTML>
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>
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.
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.
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.
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.
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="http://www.heroes.net/icons/next.gif" ALT="[Next Page]">
Text-only browsers would display [Next Page], whereas graphical browsers would display the actual image.
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.
http://www.techsmith.com/community/htmlrev/index.html
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.
http://www.microsoft.com/msdownload/
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.
http://www.microsoft.com/msword/internet/ia/
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."
http://www.microsoft.com/msoffice/msexcel/internet/ia/
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.
http://www.microsoft.com/msoffice/mspowerpoint/internet/ia/
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.
http://www.sq.com/products/hotmetal/hmp-org.htm
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.
http://www.brooknorth.com/welcome4.html
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.
http://www.nesbitt.com/download.html
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.
http://www.safety.net/webelite/
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.
http://www.ist.ca/
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.
http://www.sausage.com.au/dogindex.htm
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.
http://www.wbmedia.com/publisher/
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.
http://www.microsoft.com/msoffice/frontpage/
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
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 |
ps2html | http://stasi.bradley.edu/ftp/pub/ps2html/ps2html-v2.html |
PS2HTML | http://www.area.fi.cnr.it/area/ps2html.htm |
Program | Program URL |
Cyberleaf | http://www.ileaf.com/cyberleafds.html |
Html Transit | http://www.infoaccess.com/ |
Web Publisher | http://www.skisoft.com/ |
KEYview | http://www.ftp.com/ |
rtftohtml | http://www.sunpack.com/RTF/rtftohtml_overview.html |
TagPerfect | http://www.jsp.fi/delta/deltatgp.htm |
E-Publish | http://www.stattech.com.au/ |
Program | Program URL |
ANT_HTML | http://www.w3.org/hypertext/WWW/Tools/Ant.html |
Easy Help/Web | http://www.u-net.com/eon/easyhelp/easyhelp.htm |
rtftohtm | http://www.w3.org/hypertext/WWW/Tools/RTFTOHTM.html |
CU_HTML.dot | http://www.w3.org/hypertext/WWW/Tools/cu_html.html |
GT_HTML.dot | http://www.gatech.edu/word_html/release.htm |
TagWizard | http://www.jsp.fi/delta/deltatag.htm |
tbltohtml | http://www.cadd.nps.usace.army.mil/tbl2html.htm |
Program | Program URL |
WPMacros | http://www.soton.ac.uk/~dja/wpmacros/ |
wp2html | http://www.res.bbsrc.ac.uk/wp2html/ |
Program | Program URL |
WebMaker | http://www.cern.ch/WebMaker/ |
WebWorks | http://www.quadralay.com/products/products.html |
FrameMaker5 | http://www.frame.com/ |
mif.pl | http://www.oac.uci.edu/indiv/ehood/mif.pl.doc.html |
edc2html | http://www.oac.uci.edu/indiv/ehood/edc2html.doc.html |
Program | Program URL |
latex2html | http://cbl.leeds.ac.uk/nikos/tex2html/doc/latex2html/latex2html.html |
vulcanize | http://www.plover.com/vulcanize/ |
Tex2Rtf | http://www.aiai.ed.ac.uk/~jacs/tex2rtf.html |
Jam | http://www.w3.org/hypertext/WWW/Tools/JAM.html |
BetaFormat | http://www.w3.org/hypertext/WWW/Tools/BETA.html |
Antex | http://www.w3.org/hypertext/WWW/Tools/axtex.txt |
Program | Program URL |
Dave | http://www.bucknell.edu/bucknellian/dave/ |
Pm2html | http://www.w3.org/hypertext/WWW/Tools/PM2html.html |
PageMaker6 | http://w1000.mv.us.adobe.com/ |
Program | Program URL |
text2html.sed | http://www.w3.org/hypertext/WWW/Tools/bin/txt2html.sed |
txt2html.pl | http://www.seas.upenn.edu/~mengwong/txt2html.html |
txt2html | http://www.cs.wustl.edu/~seth/txt2html/ |
WebIt | http://futures.wharton.upenn.edu/~attau791/webit.html |
HtmlMarkup | http://www.w3.org/hypertext/WWW/Tools/HTML-Markup.html |
Hyperize | http://www.w3.org/hypertext/WWW/Tools/Hyperize.html |
findrefs | http://www.w3.org/hypertext/WWW/Tools/findrefs.pl.html |
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 | http://minnie.cs.adfa.oz.au/Src2html/index.html |
ctohtml | C | http://www.w3.org/hypertext/WWW/Tools/ctohtml.txt |
src2www | C | http://www.cs.purdue.edu/homes/young/software/src2www.html |
c++2html | C++ | http://www.atd.ucar.edu/jva/c++2html.html |
cxx2html | C++ | http://www.cv.nrao.edu/aips++/RELEASED/cxx2html/ |
ObjectManual | C++ | http://www.w3.org/hypertext/WWW/Tools/ObjectManual.html |
ctoohtml | C++ | http://www.usc.edu/dept/robotics/personal/af0a/tools/ctoohtml/ |
Root | C++ | http://root.cern.ch/ |
src2www | ADA | http://www.cs.purdue.edu/homes/young/software/src2www.html |
Floppy | FORTRAN | http://vscrna.cern.ch/floppy/contents.html |
Light | FORTRAN | http://www.cern.ch/Light/ |
lisp2html | LISP | http://www.w3.org/hypertext/WWW/Tools/Lisp2Html.html |
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 |
RosettaMan | http://www.w3.org/hypertext/WWW/Tools/RosettaMan.html |
man2html | http://www.w3.org/hypertext/WWW/Tools/cameron.txt |
man2html | http://www.w3.org/hypertext/WWW/Tools/man2html.html |
man_html | http://www.w3.org/hypertext/WWW/Tools/man_html.html |
man-cgi | http://www.softlab.ntua.gr/~christia/man-cgi.html |
man2html | http://www.w3.org/hypertext/WWW/Tools/nroff.txt |
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 |
MHonArc | http://www.w3.org/hypertext/WWW/Tools/MHonArc.html |
Hypermail | http://www.w3.org/hypertext/WWW/Tools/Hypermail.html |
mlist2html | http://www.leo.org/~stumpf/src-dist/mlist2html/info.html |
mail2html | http://www.w3.org/hypertext/WWW/Tools/georges-mail2html.html |
CoCoBoard | http://jean-luc.ncsa.uiuc.edu/Codes/CoCoBoard/ |
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 |
faq2ms | http://iamwww.unibe.ch/~scg/Src/Scripts/ |
faq2html | http://www.w3.org/hypertext/WWW/Tools/faq2html.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.