by David Blankenbeckler
HTML, or Hypertext Markup Language, is the glue that binds all the content on the Internet so that it can be properly presented on your Web browser. The name itself, Hypertext Markup Language, accurately describes the primary purposes of the language:
HTML was originally designed to allow people to share static content. However, the demand for active content has extended HTML far beyond these humble beginnings to include support for scripting (see Chapter 27, "Manipulating Web Components Using JavaScript," and Chapter 28, "Manipulating Web Components Using VBScript") as well as support for ActiveX objects and Netscape plug-ins. HTML's simplicity and ease of use allow it to prevail as the content framework for the Web, tying all the pieces together for presentation in your Web browser.
The purpose of this chapter is to
This chapter gives you a basic understanding of HTML and serves as a reference for the most commonly used features of HTML. The information presented in this chapter is compliant with HTML version 3.2.
The next two chapters discuss the two powerful HTML scripting languages, JavaScript and VBScript. Scripting allows a page to become dynamic by making a page programmable. For example, you can have an input validation script that will run when information has been entered into a form. Scripting also allows communication between the HTML document and Java applets or ActiveX controls. ActiveX controls and Java applets are placed into a document with the <OBJECT> and <APPLET> tags, respectively. The <OBJECT> and <APPLET> tags are covered in Chapter 29, "Embedding Components Within Web Pages."
You might be wondering why to bother to learn HTML when several commercial packages that generate HTML code for you are available. Products such as Microsoft FrontPage and Netscape Navigator Gold will allow you to enter content in a WYSIWYG ("what you see is what you get") environment just as if you were using a good word processor. As a matter of fact, you should use these products to enter more than just a few lines of content. Unfortunately, these packages have not evolved to the point that they can support all the latest features necessary to build active, multimedia Web pages. Therefore, you really can't avoid learning how to get around inside an HTML file.
An HTML file is not compiled; it is simply a text file that the Web browser interprets. Consequently, the only tools you need to design a Web page are an ASCII text editor, such as Notepad, to write the code and a Web browser to test your creation.
This is all you need to design a Web page, but you can also use
HTML authoring software such as Microsoft FrontPage, Anawave Software
HotDog Pro, or Netscape Navigator Gold.
| NOTE |
Most Web browsers have an option that enables you to view HTML source code. This feature is a very useful way to see how other Web pages have been designed. In Microsoft Internet Explorer, select Source from the View menu. In Netscape Navigator 3.0, select Document Source from the View menu |
When a Web browser reads an HTML file, the text is parsed sequentially
for special instructions that tell the browser what to do with
the content of the file. The special instructions in an HTML file
are known as tags. Tags are enclosed inside the <
and > characters. For example, when the browser reads
the example file in Listing 26.1, the first text it finds is <HTML>.
This tag told the browser that the code to follow was HTML and
to treat it as such. Generally, a set of tags marks off the relevant
portion of the document. The start and end tags are the same except
that the final one includes a slash (/) character.
Listing 26.1. A simple HTML example.
<HTML> <HEAD> <TITLE>A Simple Example of HTML</TITLE> </HEAD> <BODY> This is a simple example of an HTML document. </BODY> </HTML>
The result of this example is shown in Figure 26.1.
Figure 26.1 : The results of the simple HTML example in Listing 26.1.
The third line in Listing 26.1 tells the browser to treat the
text between <TITLE> and </TITLE>
as a title. Microsoft Internet Explorer and Netscape Navigator
will display the text in the top of the window. The text between
<BODY> and </BODY> will be displayed
in the body of the document.
| NOTE |
Tags do not have to be in uppercase; that is, they are not case sensitive. However, the general practice is to use uppercase for all tags simply to improve readability |
Some HTML tags have specific attributes that can be set to specify a certain behavior. An attribute is a type of extension to an HTML tag that allows you to specify additional information. Examples include
A tag can have more than one attribute. Each attribute must be followed by at least one space. A single space is generally used, but is not required.
An HTML file is broken into several sections. For example, there is a section for the document heading as well as the document body. Refer to Listing 26.2 as I discuss the structural tags for HTML.
Listing 26.2. The basic structure of an HTML file.
<HTML> <HEAD> <TITLE>This appears in the title bar.</TITLE> </HEAD> <BODY> This appears in the body of the document </BODY> </HTML>
While there is a wide array of HTML tags available, only a few are actually required per the HTML specification. These required tags are essentially the tags that define the structure of the document. While these tags are required by the specification, both Internet Explorer and Netscape Navigator will properly display a file without them. For example, a plain-text file will be displayed properly in either browser.
An HTML document must begin with the <HTML> tag and end with the </HTML> tag. This tag set tells the browser that the file being read is an HTML document and everything between <HTML> and </HTML> should be parsed for other tags.
VERSION="Version info"-This attribute is used to indicate HTML Document Type Definition (DTD). For example, a document supporting version 3.2 would use "-//IETF//DTDHTML//EN//3.2".
See Listing 26.2.
The purpose of the <HEAD> section is to contain information about the document, such as the title.
None
See Listing 26.2.
The title should describe the contents of the page. This text will be displayed in the title bar of the browser. In addition, the title will typically be used in the bookmark and history list implemented in most, if not all, browsers. Therefore, titles should be relatively short and summarize the contents of the page.
None
See Listing 26.2.
The body contains the content of the document. Many other types of tags within the body format text, insert pictures, and create tables, hyperlinks, and lists.
None
See Listing 26.2.
There are two general page tags that are used in HTML documents, <BASE> and the commenttag.
The <BASE> tag indicates a base address for relative references in the document. This tag should be included in the <HEAD> section.
HREF="..."-Indicates the base address
<BASE HREF="http://www.blankenbeckler.com/main/">
In this example, a hyperlink later in the document could use <A HREF="computer.html">Computer Products</A> to reference http://www.blankenbeckler.com/main/computer.html. This allows the HTML author to specify addresses without having to type in the full address.
The comment tag encloses comments within the HTML file. The browser does not display any text inside these tags.
None
The following text could be anywhere inside the HTML document:
<!- This is a comment. It will not be interpreted or displayed by the browswer. ->
There are many different HTML tags available to specify the format and content of a document. For example, there are text-formatting tags to specify that text be bold or italics. In addition, there are tags that are used to insert images or hyperlinks.
There are many different types of HTML tags to control the format of text. The HTML Specification only provides guidelines about how each of these should be handled by the browser. For this reason, some of the tags may be implemented slightly differently on various browsers.
<B> creates bold text between <B> and </B>.
None
<HTML><HEAD><TITLE>A Bold Example</TITLE></HEAD><BODY> <B>This text is bold.</B><BR> This text is not. </BODY></HTML>
This <BR> tag specifies a line break.
None
The following example causes the two sentences to appear on separate lines:
<HTML><HEAD><TITLE>A Break Example</TITLE></HEAD><BODY> This is line one.<BR>This is line two. </BODY></HTML>
<CITE> indicates a citation or title of a book.
None
<HTML><HEAD><TITLE>A CITE Example</TITLE></HEAD><BODY> <CITE>This is CITE text!</CITE> <BR>This is normal text. </BODY></HTML>
The <CODE> tag indicates programming code.
None
<HTML><HEAD><TITLE>A CODE Example</TITLE></HEAD><BODY> The line <CODE>if x=5 then y=0</CODE> sets y to 0 if x is 5. </BODY></HTML>
The text between <EM> and </EM> is emphasized. This is generally implemented by the browser as italicized text.
None
<HTML><HEAD><TITLE>A Emphasize Example</TITLE></HEAD><BODY> <EM>This text is emphasized.</EM><BR> This text is not. </BODY></HTML>
The tags <H1> through <H6> are heading tags. <H1> is the topmost level, while <H6> indicates the lowest level. These tags are completely independent of each other and can be used in any order; for example, you could use <H1>, then <H3>, then <H5>; or you could use only <H3>.
None
The code example in Listing 26.3 contains three heading levels. You can see the results of this code in Figure 26.2.
Figure 26.2 : The results of the code in Listing 26.3.
Listing 26.3. A heading example.
<HTML><HEAD><TITLE>A Heading Example</TITLE></HEAD><BODY> <H1>Plants</H1><P> <H2>Trees</H2><P> <H3>Oak</H3><P> <H3>Maple</H3><P> <H2>Grasses</H2><P> <H3>Bermuda</H3><P> <H3>Centipede</H3><P> <H1>Animals</H1><P> <H2>Mammals</H2><P> <H3>Elephant</H3><P> <H3>Lion</H3><P> <H2>Birds</H2><P> <H3>Eagle</H3><P> <H3>Sparrow</H3><P> </BODY></HTML>
Creates italic text between <I> and </I>.
None
<HTML><HEAD><TITLE>A Italics Example</TITLE></HEAD><BODY> <I>This text is italic.</I><BR> This text is not. </BODY></HTML>
The keyboard tag indicates keyboard input. For example, instructions for installing software might ask the user to type SETUP.
None
<HTML><HEAD><TITLE>A Keyboard Format Example</TITLE></HEAD><BODY> To install the software, please type <KBD>SETUP</KBD>. </BODY></HTML>
<P> represents a new paragraph.
None
See the example for <H1> through <H6>.
The <PRE> tag set creates preformatted text that maintains the spacing of the characters. Text is displayed in a nonproportional font.
WIDTH=-Can be used to specify the maximum number of characters per line. The browser uses WIDTH= to determine a suitable font size.
The following example shows text that is preformatted:
<HTML><HEAD><TITLE>A Pre-formatted Example</TITLE></HEAD><BODY>
<PRE>
Left side
In the middle
Right side
</PRE
</BODY></HTML>
<SAMP> indicates a sequence of literal characters, data output, or programming code. In most browsers this is implemented similarly to the <CODE> tag.
None
<HTML><HEAD><TITLE>A SAMPLE Example</TITLE></HEAD><BODY> <SAMP>This is SAMPLE text!</SAMP> <BR>This is normal text. </BODY></HTML>
<STRONG> indicates strong emphasis.
None
<HTML><HEAD><TITLE>A Strong Example</TITLE></HEAD><BODY> <STRONG>This is strongly emphasized!</STRONG> <BR>This is normal text. </BODY></HTML>
<SUB> indicates a subscript.
None
<HTML><HEAD><TITLE>A Subscript Example</TITLE></HEAD><BODY> This is an example of a sub<SUB>script</SUB><BR> </BODY></HTML>
<SUP> indicates superscript.
None
<HTML><HEAD><TITLE>A Superscript Example</TITLE></HEAD><BODY> This is an example of a super<SUP>script</SUP><BR> </BODY></HTML>
The <TT> tag set indicates a typewriter or teletype-style text. This tag is generally implemented by the browser as a nonproportional font, such as Courier.
None
<HTML><HEAD><TITLE>A TT Example</TITLE></HEAD><BODY> <TT>This is TT text!</TT> <BR>This is normal text. </BODY></HTML>
Listing 26.4 illustrates the use of each of the text-formatting tags, and Figure 26.3 shows the corresponding output.
Figure 26.3 : A text-formatting example.
Listing 26.4. A text-formatting example.
<HTML><HEAD><TITLE>A Text-Formatting Example</TITLE></HEAD> <BODY> The purpose of this example is to show you the various text-formatting tags. <P> <B>Bold Text</B><BR> <CITE>This is a citation</CITE><BR> The following is a code sample: <CODE>if x = 3 then y = 0</CODE><BR> <EM>Emphasized Text</EM><BR> <I>Italicized Text</I><BR> <KBD>This text should be typed at the keyboard</KBD><BR> <SAMP>This is sample text</SAMP><BR> <STRONG>This text is STRONGLY emphasized</STRONG><BR> This is an example of a sub<SUB>script</SUB><BR> This is an example of a super<SUP>script</SUP><BR> <TT>Typewriter text</TT><BR> </BODY> </HTML>
HTML provides support for creating lists in two different forms, ordered and unordered lists.
The unordered list tag creates a list. The browser will display the list with bullets. The <LI> tag precedes each list item.
COMPACT-Suggests that the browser use a more compact style when displaying the list.
TYPE-Specifies the type of bullet to be used. Valid values are disc, square, and circle.
The following example shows a list of three items, and the result of this code appears in Figure 26.4:
Figure 26.4 : A bulleted list example.
<HTML><HEAD><TITLE>A List Example</TITLE></HEAD><BODY> <UL> <LI>Item 1 <LI>Item 2 <LI>Item 3 </UL> </BODY></HTML>
The ordered list tag creates a numbered list, as shown in Figure 26.5.
Figure 26.5 : An ordered list example.
COMPACT- Suggests that the browser use a more compact style when displaying the list.
TYPE-Specifies the type of numbering to be used. Valid values are
| Numbering Style | |
| 1, 2,… | |
| a, b,… | |
| A, B,… | |
| i, ii,… | |
| I, II,… |
<HTML><HEAD><TITLE>An Ordered List Example</TITLE></HEAD><BODY> <OL TYPE=A> <LI>Apples <LI>Peaches <LI>Oranges </OL> </BODY></HTML>
A hyperlink is a link between a specific text or image in one document to either another location in the same document or to another document. When a user clicks the hyperlink, the new location will be displayed.
The anchor tag creates a hyperlink anchor. The text between <A> and </A> will become a hyperlink to the specified location.
HREF="..."-Specifies the location for the hyperlink (for example, HREF="www.microsoft.com").
NAME="..."-Identifies a name for another link to reference. This attribute allows another hyperlink to access this spot in the document by referring to that name. For example, to set an anchor in a document to CHAP5 you would use <A NAME="CHAP5">. Then to access the anchor that was named CHAP5 from another location in the document, you would use <A HREF="#CHAP5">.
TITLE="..."-Provides the title of the destination document. The browser can use this attribute to show the title when the mouse is over the hyperlink. However, this attribute does not appear to have any effect in Netscape Navigator 3.0 or Microsoft Internet Explorer 3.0. It may be supported in future versions of these browsers.
Follow this link to Microsoft:
<HTML><HEAD><TITLE>A Hyperlink Example</TITLE></HEAD><BODY> <A HREF="http://www.microsoft.com/">Microsoft's Homepage</A> </BODY></HTML>
Adding graphics to an HTML document is accomplished with the <IMG> tag. A horizontal rule can be added with the <HR> tag.
The <IMG> tag is used to insert a GIF or JPEG graphic into the document.
SRC="..."-Specifies the location and file name for the image file.
ALT="..."-Specifies a string of text to display in case the browser does not support graphical output.
ALIGN="TOP"|"MIDDLE"|"BOTTOM"-Aligns the image either top, middle, or bottom relative to the current line of text. You can also use the WIDTH and HEIGHT settings to specify the width and height in pixels.
ISMAP-Indicates that the image is a clickable map. This attribute usually involves a CGI program to handle the request.
The following example shows the Sams Publishing logo, which appears in Figure 26.6:
Figure 26.6 : An <\<>IMG> example.
<HTML><HEAD><TITLE>IMG Example</TITLE></HEAD><BODY> <IMG SRC="sams16.gif"> </BODY></HTML>
<HR> draws a thin horizontal rule across the page, as shown in Figure 26.7.
Figure 26.7 : A horizontal rule example.
None
<HTML><HEAD><TITLE>Horizontal Rule Example</TITLE></HEAD><BODY> This text is above the line. <HR> This text is below the line. </BODY></HTML>
Although popular Web browsers have supported tables for quite some time, tables didn't become official until the recent release of the HTML 3.2 standard. This section shows you how to use tables in your HTML pages. It starts by explaining the requisite table tags and concludes with a detailed example.
The <TABLE> tag surrounds the entire table portion of the HTML file.
ALIGN=LEFT|CENTER|RIGHT-Specifies the horizontal position of the table with respect to the left and right margins.
WIDTH=-Specifies the width of the table. The value of this attribute can be specified in pixels or as a percentage of the space between the current left and right margins. For example, to make the table occupy 60 percent of the space between the two margins, use WIDTH="60%". If the width parameter is not used, then the default value is 100 percent.
BORDER=-Specifies the border thickness in pixels.
CELLSPACING-Specifies the spacing between each cell as well as the spacing between the table frame and the outside cells. This attribute provides backward compatibility.
CELLPADDING-Specifies the spacing between the border of each cell and the contents of that cell.
See Listing 26.5.
The caption tag specifies a caption for the table.
ALIGN=TOP|BOTTOM-Controls the position of the caption relative to the table. The default position is unspecified, but appears to be TOP for both Microsoft Internet Explorer 3.0 and Netscape Navigator 3.0.
See Listing 26.5.
The <TD> tag precedes each data cell in the table. An end tag, </TD>, is optional.
ALIGN=LEFT|CENTER|RIGHT-Specifies the horizontal position of the cell contents for a table row.
COLSPAN=-Specifies the number of columns that this cell spans. The default value is 1.
NOWRAP-Disables automatic text wrapping for a data cell.
ROWSPAN=-Specifies the number of rows that this cell spans. The default value is 1.
VALIGN=TOP|MIDDLE|BOTTOM-Specifies the vertical alignment of the cell contents.
WIDTH=-Suggests a width (in pixels) for the browser to use when rendering the cell.
HEIGHT=-Suggests a height (in pixels) for the browser to use when rendering the cell.
See Listing 26.5.
<TH> specifies a heading cell in the table and should precede each heading cell. Browsers usually use a bold font (or some other emphasis) for heading cells to distinguish them from data cells. An end tag, </TH>, is optional.
Same as <TD> attributes previously defined.
See Listing 26.5.
<TR> indicates the start of a new row in the table.
ALIGN=LEFT|CENTER|RIGHT-Specifies the horizontal position of the cell contents for a table row.
VALIGN=TOP|MIDDLE|BOTTOM-Specifies the vertical alignment of the cell contents.
See Listing 26.5.
Tables are a little more difficult to understand than some of
the other elements of HTML simply because they contain so many
different tags. The HTML file in Listing 26.5 shows you how to
fit together all these pieces to form a table.
Listing 26.5. A table example.
<HTML><HEAD><TITLE>A Table Example</TITLE></HEAD> <BODY> <TABLE><CAPTION>Yearly Sales</CAPTION> <TR><TH>Salesperson<TH>1994<TH>1995<TH>1996 <TR><TD>D. Blankenbeckler<TD>$125,000<TD>$115,000<TD>$187,000 <TR><TD>B. Morgan<TD>$165,000<TD>$130,000<TD>$177,000 <TR><TD>H. Ruo<TD>$110,000<TD>$133,000<TD>$165,000 </TABLE> </BODY> </HTML>
The browser output from this file is shown in Figure 26.8.
Figure 26.8 : A browser's version of the table created in Listing 26.5.
The first line in the body of the file starts with <TABLE>. This tag is required so that the browser knows that a table structure will follow. Note that the table structure must end with a </TABLE> tag. Everything between the <TABLE> and </TABLE> tags is part of the table.
The first item in the table structure is the caption text, or title of the table; it must be followed by the </CAPTION> tag. You can use text-formatting tags to change the appearance of the caption.
The next line starts with <TR> to define the first row in the table. This row will contain headings, so it takes the <TH> tag. The <TH> tag precedes each heading (for example, Salesperson). The closing </TH> and </TR> tags are optional and are not used in this example. Omitting the optional closing tags enhances the readability of the HTML source code.
The next line starts with another <TR> tag, which tells the browser that a new row has begun. This row contains data elements, each of which begins with a <TD> tag. Like the <TH> and <TR> tags, the closing </TD> tag is not necessary and therefore not used.
The following two lines are also data lines and are structured exactly the same. A </TABLE> closing tag indicates the end of the table.
The next element to add to the table is a border. An easy way
to add a border is to include the BORDER=1 attribute
in the <TABLE> tag (that is, <TABLE BORDER=1>).
The modified code is shown in Listing 26.6.
Listing 26.6. Another table example.
<HTML><HEAD><TITLE>A Table Example</TITLE></HEAD> <BODY> <TABLE BORDER=1><CAPTION>Yearly Sales</CAPTION> <TR><TH>Salesperson<TH>1994<TH>1995<TH>1996 <TR><TD>D. Blankenbeckler<TD>$125,000<TD>$115,000<TD>$187,000 <TR><TD>B. Morgan<TD>$165,000<TD>$130,000<TD>$177,000 <TR><TD>H. Ruo<TD>$110,000<TD>$133,000<TD>$165,000 </TABLE> </BODY> </HTML>
The output for this example is shown in Figure 26.9.
Figure 26.9 : Another table example; this table includes a border.
HTML provides a means for the user to enter information, send it back to the server, and receive a customized page of information in return. An example that you might be familiar with is a stock quote page. You can enter a stock ticker symbol, and the server will create a page with the stock's current price and other information. This type of customization is typically accomplished through the use of HTML forms and a common gateway interface (CGI) program that runs on the server. The form sends the user-supplied information back to the server, where the CGI program creates a customized page based on the user's information.
Read on to learn how to use HTML forms. The discussion starts
with a review of the tags used to create forms and concludes with
an analysis of a sample form.
| NOTE |
The topic of CGI programming is not discussed here. The interested reader is referred to one of the many books on the subject, such as Sams Publishing's CGI Programming Unleashed |
The <FORM> tag set encloses the entire form. <FORM> is required at the beginning of the form structure, and </FORM> marks its end.
ACTION="..."-Specifies the URL of the program that executes as a result of the submit button being clicked. This program is typically a CGI program on the server.
METHOD="GET"|"POST"-If GET is selected, the browser will form a query URL that includes the location of the current form and the values entered into the form. The server will then use this information to process the query. If POST is selected, the form data is sent to the server as a data block to the standard input service.
ENCTYPE=-Specifies the format of the data to be sent to the server.
See Listing 26.7.
<INPUT> specifies an input object on the form. Several different types of input objects are available, such as text box, radio button, and check box. The attributes available depend on the type of input object selected (with TYPE=).
TYPE="TEXT"|"PASSWORD"|"CHECKBOX"|"HIDDEN"|"RADIO"|"IMAGE"|"SUBMIT"|"RESET"-Specifies the type of input object to use. The following options are available:
NAME=-Specifies a name for a particular input object.
VALUE=-Specifies and initializes a value for a particular input object.
SIZE=-Specifies the amount of display space allocated for a particular input object.
MAXLENGTH=-Specifies the maximum length of data for a particular input object.
CHECKED-Indicates that the initial state of a CHECKBOX or RADIO button is on.
ALIGN=-Aligns the image input object with the text, the same way as <IMG> does.
See Listing 26.7.
<SELECT> creates a list of items from which the user can make a selection. You need to use the <OPTION> tag to create the list of items.
MULTIPLE-Indicates that multiple items can be selected from the list.
NAME=-Specifies the name of the field.
SIZE=-Specifies the number of visible items. The other items can be seen by using the scrollbar. If the size is set to 1, the result is generally a drop-down list.
See Listing 26.7.
The <OPTION> tag specifies the choices for a <SELECT> object.
SELECTED-Indicates that this value is initially selected.
VALUE=-Indicates the value that is returned if this option is selected. The default value is the OPTION item text (the text following <OPTION>).
See Listing 26.7.
The <TEXTAREA> tag set creates a multiline text field.
COLS=-Indicates the number of columns wide the field should be.
NAME=-Specifies the name of the field.
ROWS=-Indicates the number of rows for the field.
See Listing 26.7.
Listing 26.7 builds a simple form that contains most of the common elements used in forms. The screen output is shown in Figure 26.10.
Figure 26.10 : The form created by the code in Listing 26.7.
Listing 26.7. A form example.
<HTML><HEAD><TITLE>A Form Example</TITLE></HEAD> <BODY> <FORM> Please enter your name:<BR> First<INPUT TYPE=TEXT NAME="FNAME" MAXLENGTH=15 SIZE=10> MI<INPUT TYPE=TEXT NAME="MI" MAXLENGTH=1 SIZE=1> Last<INPUT TYPE=TEXT NAME="LNAME" MAXLENGTH=20 SIZE=15> <P> Please select your favorite season of the year:<BR> Spring<INPUT TYPE=RADIO NAME="SEASON" VALUE="Spring"> Summer<INPUT TYPE=RADIO NAME="SEASON" VALUE="Summer"> Fall <INPUT TYPE=RADIO NAME="SEASON" VALUE="Fall"> Winter<INPUT TYPE=RADIO NAME="SEASON" VALUE="Winter"> <P> Please check all of the outdoor activities that you enjoy:<BR> Hiking<INPUT TYPE=CHECKBOX NAME="ACT" VALUE="Hiking"> Skiing<INPUT TYPE=CHECKBOX NAME="ACT" VALUE="Skiing"> Water Sports<INPUT TYPE=CHECKBOX NAME="ACT" VALUE="Water"> Cycling<INPUT TYPE=CHECKBOX NAME="ACT" VALUE="Cycling"> <P> Please enter any additional outdoor activities that you enjoy below:<BR> <TEXTAREA NAME="Other" COLS=60 ROWS=4></TEXTAREA> <P> <INPUT TYPE=SUBMIT><INPUT TYPE=RESET> </FORM> </BODY> </HTML>
The form definition begins with the <FORM> tag at the beginning of the body of Listing 26.7. You can also see that the </FORM> tag marks the end of the form. The first three fields are text input boxes, created by the <INPUT TYPE=TEXT...> tags.
The next four fields are radio buttons, created with <INPUT TYPE=RADIO...>. Because all four buttons have the same name, "SEASON", they are grouped together. Therefore, only one of the buttons can be selected at any one time.
The check boxes were created with the <INPUT TYPE=CHECKBOX...> tags. Check boxes are different from radio buttons in that check boxes can be selected independently of each other even though they all have the same name. When the check boxes have the same name, as in this example, each NAME and VALUE pair will be returned. For example, depending on the choice made by the user, the following data might have been returned:
ACT, Hiking ACT, Cycling
The <TEXTAREA NAME="Other" COLS=60 ROWS=4></TEXTAREA> line creates the multiline text input box. The text box should be 60 columns wide and 4 rows deep. If desired, default text can be inserted before the </TEXTAREA> tag. For example, the following line would insert None as the default text:
<TEXTAREA NAME="Other" COLS=60 ROWS=4>None</TEXTAREA>
The following short example illustrates the use of the <SELECT> tag. The code appears in Listing 26.8. Notice the use of the MULTIPLE key to allow the selection of multiple items on the ordered list. Selecting multiple items typically requires that the user press the Ctrl key while clicking on the desired items. Figure 26.11 displays the corresponding screen output.
Figure 26.11 : The screen display generated by the code in Listing 26.8.
Listing 26.8. A form that uses <SELECT>.
<HTML><HEAD><TITLE>A Form Example</TITLE></HEAD> <BODY> <FORM> Please select the items you wish to order:<BR> <SELECT NAME="ITEMS" SIZE="3" MULTIPLE> <OPTION>Coffee Mug <OPTION>Coffee Warmer <OPTION>Drip Coffee Maker <OPTION>Standard Expresso Maker <OPTION>Deluxe Expresso Maker </SELECT> <P> Select your form of payment:<BR> <SELECT NAME="PAYMENT" SIZE="1"> <OPTION>Cash <OPTION>Check <OPTION>Credit Card </SELECT> <P> <INPUT TYPE=SUBMIT><INPUT TYPE=RESET> </FORM> </BODY> </HTML>
The official, released version of the World Wide Web Consortium (W3C) HTML specification at the time of this writing is 3.2. The W3C will continue to add new features to HTML. The group is currently working on support for the following types of improvements to HTML:
However, the most popular browsers are already adding support for these types of features. If you are developing Web pages, you need to consider your audience. If your expected audience is the entire world, you might wish to limit HTML use to the most recently approved specification. In addition, you should test your pages on all the popular Web browsers, in particular, Netscape Navigator 3.0 and Microsoft Internet Explorer 3.0.
You can find information on the latest released and proposed HTML standards on the World Wide Web Consortium's home page, which is located at http://www.w3.org/pub/WWW/.