Chapter 25

HyperText Markup Language (HTML)

by Rick Tracewell

• Body and Text Commands
  • The Basics: What Every HTML Document Needs
• Basic Paragraph Text Tags
• Text Styles
• Color Values
• Hyperlinks
• Images
• HTML Interactions and Enhancements
  • Forms
• Tables
• Multimedia: Audio, Video, Applications
• Frames
• Summary

So, you think that HTML is easy? Do you think that it's a waste of time to learn HTML when you've got more exciting things such as Shockwave, Java, and VRML to develop for? If so, it's time for a reality check. Granted, HTML is pretty simple as far as programming languages go. Some people go so far as to claim that it isn't programming at all. The fact is that HTML is the virtual glue that holds together all of these exciting new multimedia and interactive technologies on the Web. Without HTML, there wouldn't be any global way to present the "fancy" stuff.

HTML keeps everything on the World Wide Web anchored to a common ground. So, keeping up with the latest upgrades and features supported (or not supported) by the major Web browser players, such as Netscape and Microsoft, is not only a good idea, but it is a necessity if you are planning to stay competitive in this medium. Multimedia (audio, video, interactive applications) is being integrated into HTML for Web use at a very rapid rate, so making sure that you are in tune with the latest tags supported in HTML could save you a considerable amount of time in the long run.

In this chapter, you will learn some of the new features supported in HTML 2.0 (and proposed for HTML 3.0), and you will be introduced to some of the built-in HTML/multimedia functionality supported by the major Web browsers that virtually eliminates some of the harder-to-learn languages such as JavaScript. Providing all HTML tags would be a little overkill, so I opted to include the most up-to-date tags and the proposed tags that will probably be in use by the time this book is published. I highly recommended that you look through and test each of these tags, because they can be very useful in creating effective Web pages for you and your clients.

I wrote this chapter assuming that you have at least a working knowledge of the basics of HTML. Therefore, I used easily understandable and accessible resource information rather than tons of walk-through examples. The chapter covers the most basic of HTML commands (see the sections "The Basics: What Every HTML Document Needs" through "Text Styles" later in this chapter), as well as the newest tags supported by proposed HTML 3.0 and the two top Web browsers: Netscape Navigator 2.x/3.x and Microsoft Internet Explorer 2.x/3.x.

Simple gray backgrounds were all that were available for Web page designers "way back" in 1993 and early 1994, but today there are many commands and specifications that enable color to be placed almost anywhere and in almost every shade (see the section "Color Values" later in this chapter). Choose any graphic as a background and add unique flair to your Web page, or simply choose a color from your computer's palette to keep the background graphic in the background and the text and graphics on your page as the main focus of a visitor's attention. With newer browsers (at the time of this writing, only Internet Explorer), you can now colorize tables within individual cells to really enhance your documents.

Hyperlinks are what make the Web dynamic. The ability to create a tag that enables users to jump to anywhere in the world by simply clicking their mouse cursor is one of the powerful features of HTML (see the section "Hyperlinks"). Since the early incarnations of HTML, hyperlinks have evolved along with everything else to include graphics-"clickable images" that enable the designer to specify coordinates and send people to multiple locations from one graphic-and much more (see the "Images" section).

Images are an important part of any Web page layout. But, how do you get the image to place correctly with the text on the page? Why won't the graphic enable text to flow around it? Can I force the graphic to one or the other side of the page? What if someone is using a text-only browser or is on a slow connection and has graphics turned off? Will that person know what the text on a hyperlinked button graphic says? These are common questions that are addressed in the following pages.

It's great to have lots of useful information available on your Web pages for clients, friends, and relatives or fans, but what if you want to get some information from them? With HTML, a simple form will do the trick. Forms can be used for applications, to request more information, as order forms, as guest books, and much more (see "Forms" in "HTML Interactions and Enhancements"). Your HTML document takes the information provided in the <FORM> fields and sends it to a CGI (Common Gateway Interface) application that (depending on how it is written) processes the data and returns it to you either on a Web page or through e-mail. This feature of HTML is a very valuable tool in gathering information from your Web site visitors-and a great way to collect marketing data!

Tables are another powerful feature of HTML that enable Web designers to actually have control over text and graphics by placing them in rows and cells (see "Tables" under "HTML Interactions and Enhancements"). This HTML tag is perfect for displaying in an easy-to-read format information such as price sheets, inventory reports, profit/loss statements, company projections, schedules, and anything else you can think of. Tables can also be used for restraining graphics and text so that they are positioned exactly how you want them. (Table borders can be turned off so that they are invisible.)

Integrating audio clips, animated graphics, video clips, and more is currently the craze (see the section "Multimedia: Audio, Video, Applications"). HTML and the leading Web browsers have had to come up to speed quickly in order to handle these new commands: background audio, scrolling text, Shockwave, JavaScript, and more. As you can imagine, with these new features being introduced at a rapid pace, only a few browsers support them. Each feature will note a few of the more popular browsers that support it or don't support it.

The latest creation for Web browsers (thanks to the team at Netscape Communications) is the <FRAMESET> tag (see the "Frames" section). The <FRAMESET> tag enables multiple documents to be simultaneously active on a page, giving the visitor several independent windows (or frames) in which to view information. Instead of forcing a Web designer to create huge HTML documents, one Frame document enables the designer to use hyperlinks within the frames of the Frame document to link with other HTML documents. One nice thing about using <FRAMES> is that you can have a logo and/or a table of contents on-screen at all times while the main frame is where the visitor sees the information he wants-which is a handy navigation tool! This feature can only be viewed by a few browsers, so the <NOFRAMES> tag enables the designer to provide access to the information in another manner for visitors with non-frame compatible browsers (see the section "Frames" for more details).

Body and Text Commands

These are the most common HTML commands. Each HTML document is filled with them. What you might not know is how much some of them have been enhanced in the latest incarnations of HTML.

The Basics: What Every HTML Document Needs

Increasingly, the basic tags in HTML that used to just get copied from one document to another without ever changing are becoming important to the overall layout of a Web page. From changing the color of the text (hyperlinks, visited hyperlinks, and so on) to changing the color of the background (or using an image) to specifying fonts or style sheets to adjusting margins, these tags need to be looked at and mastered.

<HTML> : </HTML>

This tag is placed at the beginning and end of the entire HTML page and lets the server know that it is an HTML document.

<HEAD> : </HEAD>

This tag is placed at the top of the document, encompassing the <TITLE> tag.

<TITLE> : </TITLE>

This tag encompasses the title of the document (usually displayed in the top frame of the browser window).

<BODY> : </BODY>

This tag surrounds all HTML tags within the body of the document. Any changes to the background, colors of text, and the margins of the document are applied within the <BODY> tags. The following attributes are applicable to this tag.

<BODY BACKGROUND=>

This attribute selects a graphic file and tiles it as the background for the HTML document. Here is an example:

<BODY BACKGROUND="/images/graphicname.gif">

<BODY BGCOLOR=>

This attribute solidly colorizes the background of the HTML document with the specified color. The default background color (if none is specified in the BODY tag) is gray. For example, this code changes the background color to white:

<BODY BGCOLOR="#FFFFFF">

For newer browsers, see Table 25.1.

<BODY BGCOLOR="WHITE">

<BODY TEXT=>

This attribute colorizes the text in the HTML document. The default text color (if none is specified in the BODY tag) is black.

<BODY LINK= VLINK=>

The LINK attribute changes the color of the text hyperlinks, and the VLINK attribute changes the color of the text hyperlink after it has been visited. In most browsers, the default link color (if none is specified in the BODY tag) is blue, and the visited link is usually red (Microsoft Internet Explorer) or purple (Netscape Navigator).

<BODY BACKGROUND= BGPROPERTIES=>

The BGPROPERTIES attribute can only be used in conjunction with the BACKGROUND tag, and it has only one value: FIXED. Basically, this attribute holds the background graphic so that it does not "scroll" down with the rest of the content (Internet Explorer-only).

<BODY BGSOUND SRC=>

The BGSOUND tag enables a Web designer to play a sound file (music, voice, sound effect, and so on) without the visitor having to actually click on anything. The sound file loads last (after graphics and text) and immediately starts playing. At the time of this writing, only Internet Explorer supports this tag. This tag has the following attributes:

<BODY BGSOUND= LOOP=>

The LOOP attribute defines the number of times the sound file is to play-for example, LOOP="2". To make the sound file play continuously, use this command:

LOOP="infinite"

Combinations

Any combination of the preceding BODY attributes can be used within the BODY tag, with the exception of the BGCOLOR and BACKGROUND attributes because they essentially serve the same purpose, and the BGPROPERTIES attributes, which can only be used in conjunction with the BACKGROUND attribute. Here are two examples:

<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FFFFFF" VLINK="#FFFFFF">

<BODY BACKGROUND="/images/graphicname.gif" TEXT="#FFFFFF">

Basic Paragraph Text Tags

As with the basic HTML body tags mentioned previously, the paragraph tags are becoming more dynamic. Whereas a simple centered paragraph used to have a <P> tag and a <CENTER> tag before with a </CENTER> tag after, you can now encompass all three of them in one tag (beginning and ending); <P ALIGN=CENTER> : </P>. Such new HTML extensions are fast becoming the norm, so become very familiar with them; they just might save you a lot of time.

<P>

The paragraph break can be placed at the beginning or end of a paragraph. It can also be used before or after a graphic to move it "down" from the above text or graphic. The paragraph break has the following attribute:

<P ALIGN=>

This is an HTML extension. Therefore, only the newest browsers support it. The following are examples of its use in justifying text to the right and left:

<P ALIGN=RIGHT>

<P ALIGN=LEFT>

Here is how to center the text:

<P ALIGN=CENTER>

The default justification for anything on a page is left.

<DIV>

This is a proposed addition to HTML 3.0. Although this tag is similar to <P>, it will be able to handle several types of paragraph breaks within this command. At the time of this writing, Netscape Navigator is the only browser supporting it and is only supporting the ALIGN attribute (covered next).

<DIV ALIGN=>

Until the other features mentioned earlier are implemented, this is the only attribute recognized by Netscape Navigator, and it is identical to the <P ALIGN=> attribute (see above). The following are examples of aligning left and right:

<DIV ALIGN=RIGHT>

<DIV ALIGN=LEFT>

The following line centers the text:

<DIV ALIGN=CENTER>

Again, the default justification for anything on a page is left.

<BR>

The line break inserts a line break smaller than the paragraph break. It can be placed at the beginning or end of a line. As with the <P> tag, it can also be used in front of or after a graphic to manipulate how close the item is to the text or graphic above. An available attribute is

<BR CLEAR=>

Instead of stopping all text flow as with the <BR> tag alone, this attribute stops text from flowing to either side of a graphic that is aligned to the left or right and resumes the text below the graphic. Here is an example:

<BR CLEAR=LEFT>

This is used when a graphic is aligned to the left, which forces the text below the graphic instead of enabling it to run alongside the graphic in the right margin. Also, <BR CLEAR=RIGHT> and <BR CLEAR=ALL> are each related to the margin.

<PRE> : </PRE>

This signifies preformatted text. The <PRE> tag renders text exactly as it is typed between the <PRE> and the end tag: </PRE>. Normal line breaking is disabled, creating text that flows off to the right of the browser window. This tag is shown on-screen as monospaced in order to enable a designer to retain specific spacing needs (such as source code).

<CENTER> : </CENTER>

When placed inside the beginning and ending tags, this tag centers text, graphics, and/or applets in the body of the document.

<HR>

The horizontal rule creates a visible line that enables you to easily separate sections of your page. The default line looks like it is embedded into the page with a 3-D look.

The following are the available attributes for the <HR> tag:

<HR SIZE=>

This attribute enables you to thicken the line by pixels. <HR SIZE=5> would be a line that is 5 pixels high.

<HR NOSHADE>

This creates a 2-D flat black line that can be used in combination with the SIZE, WIDTH, and ALIGN attributes.

<HR WIDTH=>

This attribute enables you to select the width of the line that is centered by default (other justifications are covered next). This attribute's value can be in pixels or a percentage of the document width. Just as with the other attributes for the <HR> tag, this can be used in combination with the others. For example, this is how to select the width by pixel:

<HR WIDTH="340">

Here is how to select by percentage:

<HR WIDTH="66%">

<HR ALIGN=>

Internet Explorer and Navigator enable three values for this attribute: LEFT, CENTER, and RIGHT. The default is CENTER. Again, this can be used in combination with all other <HR> attributes.

Comments

The comment tag (<!-- -->)is not displayed by the browser, so it is useful for explaining commands or reminders for others designing the same pages or to place a copyright notice. Here is an example:

<!-- Web design by TNT Media www.tntmedia.com -->

<UL> : </UL>

The Unordered List tag is for lists of items with no particular order or sequence. This tag creates an indent of the text, which continues until the end tag is given. It is commonly used with the <LI> command (covered later) to create an unordered list of bullet items.

The following are the available attributes:

<UL> Nesting

Technically, there isn't a tag for this, but it is a feature of the <UL> tag. This enables you to nest several indentations, similar to a tree structure. You'll notice in the following family tree example that to create this effect, you simply continue indenting instead of adding the end (</UL>) tag. This technique is cumulative, so your information continues off the right side of the view window if you aren't careful. Notice that in Figure 25.1, the bullet styles change as the items are indented. The bullet style can be changed with the TYPE attribute.

Figure 25.1 : Bullet style samples.

<FONT SIZE=5>The O'Brien Family Tree:</FONT>

<UL>

    <LI>James C. O'Brien and Mary McMillen

    <UL>

        <LI>Lindsey R. O'Brien

        <LI>Thomas J. O'Brien

        <UL>

            <LI>Stephanie A. O'Brien

        </UL>

        <LI>James C. O'Brien, Jr.

    </UL>

</UL>

<UL TYPE=>

This is a Netscape-only attribute that enables the change of a bullet (the <LI> tag) within the <UL> tag. Values are DISC, CIRCLE, or SQUARE.

<BLOCKQUOTE> : </BLOCKQUOTE>

This is similar to the <UL> tag, but it is commonly used for indenting text from the rest of a lengthy document. It is also used to make quotes stand out from the rest of a body of text.

<OL> : </OL>

The Ordered List tag provides a way to create numbered or alphanumeric lists rather than simple bullets. Internet Explorer and Navigator also enable two handy extensions that enhance this feature even further (covered later). Here are the available attributes:

<OL START=>

Without this attribute, your ordered list starts with number 1 and works its way up by default. The START attribute enables you to choose where the numbering starts, as in <OL START=4>. This attribute can be used in combination with the TYPE attribute (covered next).

<OL TYPE=>

Browsers use Arabic numerals by default, so this attribute gives you more options, such as <OL TYPE="A"> for capital letter numbering, <OL TYPE="a"> for lowercase numbering, <OL TYPE="I"> for capital Roman numerals, or <OL TYPE="i"> for lowercase Roman numerals.

<LI> & <OL TYPE=>

The <LI> tag can also be used with the TYPE attribute when inside an <OL> tag. The cool thing is that you can change the type on any of the <LI> tags that you have inside an <OL> tag, and it won't alter the order of the list!

<LI>

The List Items tag creates bullets in front of lines of text. It can be used inside the <UL>, <OL>, and <BLOCKQUOTE> tags.

Here are the available attributes for list items:

<LI TYPE=>

This is used in the first <LI> tag of a multiple list of bullets. The values are DISC (solid black bullet), CIRCLE (hollow bullet), and SQUARE.

Text Styles

As with any printed material, you will undoubtedly want to use stylized text to get your point across clearly. The standard bold and italics are covered here as well as tags that make text look like computer code and tags that enable you to adjust the font size of selected text for use in headings or subtitles.

<B> : </B>

The Bold tag boldfaces the text within the beginning and end tags.

<I> : </I>

The Italics tag italicizes the text within the beginning and end tags.

<TT> : </TT>

As with the <CODE> tag, the text contained between the beginning and end tags is monospaced and is usually represented by the browser with a Courier font.

<H> : </H>

The Headline font size is used to change the size of text. Attributes are numerical and are limited to 1-7, with 1 being very small and 7 being very large. The default text size in HTML is 4. It is used as <H5>Headline Five</H5>

<FONT> : </FONT>

This tag enables you to change the appearance of the text displayed in a document. The available attributes are as follows:

<FONT SIZE=>

The SIZE attribute (recognized by most current browsers) must use the numeral values 1-7 to change the size of the text with 1 being the smallest and 7 being the largest size. You can also place a + or - symbol in front of the value, such as <FONT SIZE=+3>, which then increases or decreases the base font size by that amount.

<FONT COLOR=>

This attribute (recognized by most current browsers) changes the default color, which is usually set in your browser's preferences (default is black). This attribute uses Pantone (RGB) color values or Navigator extension color names (see Table 25.1).

<FONT FACE=>

The FACE attribute enables you to actually specify a font from the machine on which the browser is installed. The author can actually select several fonts separated by commas. This is an Internet Explorer-only tag. Here is an example:

<FONT FACE="Times, Futura, Friz Quadrata>TNT Media</FONT>

If the user's machine does not have any of the fonts installed, the browser simply displays TNT Media in the default font as set in the user's browser preferences.

<BASEFONT>

This tag defines the normal document text size. Recognized by Navigator and Internet Explorer, the <BASEFONT> tag is typically used at the beginning of a document (above the <BODY> tag). The tag only has one attribute, SIZE, which is required. The available attribute is as follows:

<BASEFONT SIZE=>

As with the <FONT> tag, this attribute uses the numerical values of 1-7 to constitute the size of the body text.

<SUB> : </SUB>

The Subscript tag is not a part of the current HTML 2.0, but it is supported by the latest versions of Navigator, Internet Explorer, and NCSA's Mosaic. Text contained between the beginning and end tags is displayed half of a character lower than the rest of the text in the line but in the same font. This tag is usually used in mathematical equations.

<SUP> : </SUP>

The Superscript tag is similar to the <SUB> tag. Any text contained within the tags is displayed half of a character above the rest of the text in the line but in the same font. This tag is usually used for trademark symbols.

Color Values

Before the last six months, to specify a color value you either had to have a chart of the RGB values or you had to keep running to Netscape's Web site to find the correct value. All of that has now changed because Navigator and Explorer use color names instead of the code values. (See Tables 25.2 and 25.3.)

Hyperlinks

What good would the Web be if you couldn't get anywhere? Designing Web pages that don't go anywhere would be pretty frustrating, don't you think? Thankfully, there are now many ways to enable a visitor to freely navigate through your site while at the same time keeping a visually appealing site. Standard hypertext (a word or words linked to a URL) is still generally the same (with the exception of "anchors"-see the <A NAME> tag), but now designers can link graphics (without the ugly blue border!) and even link parts of graphics (see the <MAP> tag).

<A> : </A>

This tag creates links to other documents, URLs, e-mail addresses, or anchors within a document. It is most commonly used with the HREF attribute.

<A HREF=> : </A>

This attribute is used to link a portion of text or an image to a URL (Universal Resource Locator or Uniform Resource Locator) or e-mail address (see HREF=MAILTO:). Here is an example:

<A HREF="http://www.tntmedia.com">TNT Media</A>

If a visitor clicks on the TNT Media text, the browser retrieves the document at the URL http://www.tntmedia.com.

<A HREF=MAILTO:> : </A>

This attribute enables linking to an e-mail address using the e-mail functions of the browser. Most current browsers now support this function. Here is an example:

<A HREF=MAILTO:rick@tntmedia.com>Email me!</A>

The visitor clicks on the Email me! text, which brings up a pre-addressed e-mail message from within his or her browser.

<A NAME=> : </A>

This attribute creates an anchor anywhere within a document, so that an HREF somewhere else (either on the same HTML document or elsewhere) can link to it. It is commonly used in FAQs (Frequently Asked Questions) and long documents. The NAME attribute is invisible because the text inside of the beginning and end tags does not appear as a hyperlink.

For example, within a FAQ page titled faq.html you would have

<A NAME="tech">Technical Support Questions</A>

Now, here's how to link to it from another HTML document or from the same faq.html document:

<A HREF="faq.html#tech">Tech Support</A>

<A TARGET=>

This attribute is used within a frame document (see the "Frames" section). It enables the author to point the hyperlink to a specific frame. This is a Netscape-only tag.

<IMG SRC= ALT=>

This is an attribute of the <IMG> tag (see the section on "Images"), but it has an attribute that relates to the <A HREF=> tag. If you are placing a link around a graphic, be aware of visitors using text browsers or visitors with slow modem connections. The ALT attribute gives a text link for the image so that visitors with text browsers can see what is written or displayed on the image. For slow connections, most browsers will display the ALT text while the image is loading, which gives the visitor a chance to see what the link is. Here is an example:

<A HREF="funstuff.html"><IMG SRC="/image/funbutton.gif"

BORDER=0 ALT="Fun Stuff!">

<MAP> : </MAP>

The client-side image map tag enables the author to create multiple links within a single graphic using coordinates. It encompasses the <AREA> tag (discussed next). The available attribute is as follows:

<MAP NAME=> : </MAP>

The NAME attribute simply tells the browser the name of the image map:

<MAP NAME="imagemap1">

<AREA>

This tag defines the area coordinates of the image map. In simpler terms, it says, "If a visitor clicks in this area, take him here." The <AREA> tag requires the COORDS, SHAPE, and HREF attributes (covered next). The available attributes are as follows:

<AREA COORDS=>

This attribute provides the coordinates of the image map and is required in order for the <AREA> tag and SHAPE attribute to work. The SHAPE attribute defines how the coordinates are interpreted. See "<AREA SHAPE=>."

<AREA SHAPE=>

This attribute defines the shape of the area selected in the image map. At the time of this writing, Netscape Navigator only supports the RECTANGLE attribute, while Microsoft Internet Explorer supports RECTANGLE, CIRCLE, and POLYGONS. You can have different SHAPE attributes within an image map. Simply define each one within the <AREA> tag.

<AREA HREF=>

Like the <A HREF=> tag, this attribute points the browser to a URL.

<AREA NOHREF>

This attribute enables you to define a region in an image map where there is no HREF link. Here is an example:

<MAP NAME="imagemap1">

<AREA SHAPE="RECTANGLE" COORDS="50,50,75,75" HREF="page2.html">

<AREA SHAPE="RECTANGLE" COORDS="0,0,45,45">

</MAP>

Images

Whether or not you like a lot of graphics on your Web pages, you really can't avoid them entirely. With the mass market glomming onto the World Wide Web, you are now dealing with visitors who have the attention span of a common gnat. That said, as a Web designer, you need to keep their attention long enough to get your point across. The most effective way to do that is with clean, to-the-point graphics.

<IMG>

The Image tag enables you to insert a graphical image into an HTML document. Most popular browsers only support .gif or .jpg graphics files. The available attributes are as follows:

<IMG SRC=>

The Image source attribute is required in order for the browser to locate the graphic file:

<IMG SRC="/images/graphicname.gif">

<IMG ALT=>

This is the Alternative text attribute. As explained earlier in the section "Hyperlinks," the ALT attribute gives visitors a text description of the image in case they are using a text-only browser or they stop the image from loading. It is especially useful when the image has the <A HREF> tag around it. It is used like this:

<IMG SRC="/images/store.jpg" ALT="Our Grocery Store!">

<IMG BORDER=>

The border attribute defines a border around the graphic with the value in pixel width: <IMG SRC="/images/graphicname.jpg" BORDER=3>. This tag displays a three-pixel border around the graphic. The graphic does not have a border in default tags (no BORDER attribute). As mentioned in the "Hyperlinks" section, to remove a border when it is placed within the <A HREF>, simply define the BORDER attribute as BORDER=0.

<IMG ALIGN=>

Just as it says, this attribute aligns the image with these values: RIGHT, LEFT, TOP, MIDDLE, and BOTTOM. Navigator also supports ABSMIDDLE, ABSBOTTOM, BASELINE, and TEXTTOP.

<IMG LOWSRC=>

The low speed source attribute, which is currently a Netscape-only feature, helps speed up the loading of a graphic on a page. It precedes the SRC attribute in the <IMG> tag with the URL of a lower resolution image. When implemented, the LOWSRC attribute causes a low-resolution version of the graphic to load first, giving the visitor a quick glimpse of what the actual graphic looks like until the entire graphic is loaded. It makes an interesting effect, so some designers use it with a "special effects" angle in mind. Browsers that don't support this attribute will simply ignore it and load the graphic normally. Here is an example:

<IMG LOWSRC="/images/apple-low.gif" SRC="/images/apple.gif">

<IMG HEIGHT= WIDTH=>

By default, browsers display the image in its original size. But, behind the scenes, the browser is examining the image size and making room for the image on the page before rendering it. The HEIGHT and WIDTH attributes, currently supported by both Navigator and Internet Explorer, enable the author to tell the browser up front what the size is, so that the image rendering time is considerably less because the browser reserves space for the image and continues to load the rest of the page. Both attributes require the value in pixels, like this:

<IMG HEIGHT="50" WIDTH="100">

<IMG HSPACE= VSPACE=>

Typically, the space surrounding an image is two pixels, which can place the image a little too close to text or another image. With these attributes, you can supply another pixel separation:

<IMG HSPACE="5" VSPACE="5">

HTML Interactions and Enhancements

With the massive numbers of businesses now utilizing the Web for corporate uses, it was inevitable that there would be the need for more interaction from HTML. These are a few of the enhancements that enable businesses of all sizes to gather information and process orders online.

Forms

What good would the Web be to businesses if they couldn't process orders or request for orders online? The answer is, not a lot, which is why HTML forms were invented. Coinciding with CGI scripting, forms serve two purposes; they can send information in a cohesive manner so that the information can easily be viewed and processed (orders, requests for information, and so on) and they can send requests to the server for information (database searches).

<FORM> : </FORM>

The <FORM> tag can be placed anywhere inside an HTML document with the sub-tags within the beginning and end <FORM> tags. You must have a form-processing application in CGI (Common Gateway Interface) somewhere on your server in order to process the data retrieved in your form (ask your service provider).

The available attributes are as follows:

<FORM ACTION=>

This attribute is required in the <FORM> tag. ACTION provides the URL of the form application (usually located in the cgi-bin directory on a server, so I'll use it here) that will process the data:

<FORM ACTION="/cgi-bin/forms.cgi">

<FORM METHOD=>

This is another required attribute in the <FORM> tag. This attribute defines the way that the information is sent to the server for processing. There are two values: POST and GET. The POST value sends the data to the server in two steps: It contacts the form application and then sends the data to the server in a separate transmission. The GET value contacts the application and the server in one transmission separated by a ?. The method that you use depends on what your forms application requires.

Form Tags

<INPUT>

This tag can include many different form elements, from text fields and multiple-choice fields to submission buttons. The only required attributes are TYPE and NAME, although there are many others (covered next). The available attributes are as follows:

<INPUT TYPE="TEXT">

This attribute is used for single-line text fields (for Text Areas where people would write a comment, see the following Tip) that hold name, address, company name, and so on. (See Figure 25.2.)

Figure 25.2 : Here are some visual examples of the most common <\<>FORM> tags in action.

<INPUT SIZE=>

The SIZE attribute sets the character width of a TEXT field. Although it is not required, it is recommended to not only keep visual style on a page, but to coincide with the information that is to be typed in. For example, if you had a TEXT field for State, the SIZE value would be 2:

<INPUT TYPE="TEXT" NAME="State" SIZE="2">

<INPUT MAXLENGTH=>

This attribute defines the maximum number of characters allowed in a given text field such as the following:

<INPUT TYPE="TEXT" NAME="Company Name" SIZE="30" MAXLENGTH="80">

<INPUT TYPE="PASSWORD">

This TYPE value is used when you want to have someone enter a password or any other type of text that you want hidden. The data entered is displayed exactly the same as the TEXT value; it just displays dots or something similar instead of revealing the entered text. (Refer to Figure 25.2.)

<INPUT TYPE="CHECKBOX">

This attribute creates an easy way for visitors to select items in your Web form. CHECKBOX creates an empty box that, when clicked on (selected) by a visitor, becomes checked. A required attribute is VALUE, which tells the form application what it is that the visitor has selected. It is used like this:

<INPUT TYPE="CHECKBOX" NAME="Item" VALUE="Watch"> Watch

When you place several CHECKBOX tags with the same NAME value, you create a group of checkboxes. (Refer to Figure 25.2.)

<INPUT TYPE="RADIO">

Radio buttons are similar to the CHECKBOX value, with the exception that the visitor can only choose one selection in each group of RADIO buttons. Each RADIO button should be given a different VALUE. (Refer to Figure 25.2.)

<INPUT CHECKED>

This attribute does not require a value; it is a stand-alone feature. When you have a list of checkboxes or radio buttons, using the CHECKED attribute on one of the selections makes it checked. The visitor can simply choose another item if he or she chooses.

<INPUT TYPE="SUBMIT">

This value does just what it says: It submits the form data to the form application as specified in the <FORM ACTION=> tag described earlier. The VALUE= attribute enables you to define the text that shows on the button:

<INPUT TYPE="SUBMIT" VALUE="Click here!">

The default VALUE (if none is given) is Submit. It is commonly placed next to a RESET button that enables the visitor to clear the form and start over again. (Refer to Figure 25.2.)

<INPUT TYPE="RESET">

Again, this is basically self-explanatory. The RESET value clears the form data that has been entered thus far. As with the SUBMIT value, the VALUE= attribute can be used to change the text on the button to be Clear Data or something similar. The default value (if none is given) is Reset.

<INPUT TYPE="HIDDEN">

This value is hidden from the visitor. The HIDDEN value can be used in many different ways, one of which is to send data along with the form for internal use, such as to supply a form version.

<TEXTAREA> : </TEXTAREA>

This is the field in which you enable a visitor to enter more information than a single-line text field can handle, such as comments. However, you might restrict the amount of text area and text the visitor is given. Also, any text outside of the tags but between the beginning and end tags is displayed in the TEXTAREA. This must be plain text with no HTML tags, so that the user can modify or delete the given text. Refer to Figure 25.2. The attributes are as follows:

<TEXTAREA NAME=>

As with the NAME attribute in the previous tags, this defines the name of the TEXTAREA for the form application.

<TEXTAREA COLS= ROWS=>

This is where you are able to restrict the size of the TEXTAREA. Although text will flow above and below the TEXTAREA, it will not flow around it. As with the previous values, COLS and ROWS values are given in character spacing. The browser automatically supplies the scrollbars (both horizontally and vertically, if needed) if the user provides more text than there is room for with the COLS and ROWS set.

<TEXTAREA WRAP=>

This attribute has three values: OFF, VIRTUAL, and PHYSICAL. The OFF value functions the same as not including the WRAP attribute at all, so it is not commonly used. In default mode, if TEXTAREA has a line of text that is longer than the width of the TEXTAREA, the text will continue to the right and the visitor has to scroll right to see the rest of the text. The text is sent to the form application as one line of text.

With the value set to VIRTUAL, the long line of text automatically breaks to the next line in the TEXTAREA and is sent to the form application as one line of text (this is the most popular value).

With the value set to PHYSICAL, the long line of text breaks to the next line, as with the VIRTUAL value, but the text is sent to the form application as two lines.

<SELECT> : </SELECT>

With a list of items that have the <OPTION> tag in front of them placed between the beginning and end tags, this attribute displays multiple choice pull-down menus as shown here:

Please tell us where you heard about our site:

<SELECT>

<OPTION> Search Utility

<OPTION> Newspaper Ad

<OPTION> Flyer

<OPTION> A Friend

</SELECT>

The available attributes are as follows:

<SELECT MULTIPLE>

If MULTIPLE is not used, only one item can be selected from the list. With this attribute in place, the visitor can select multiple items from the list.

<SELECT NAME=>

As with other NAME attributes, this enables you to provide the <SELECT> data field with a name for easy sorting when the data is retrieved in any format.

<SELECT SIZE=>

This attribute determines how many <OPTION> items are shown in the pull-down menu window. The default is one. This is best used with the MULTIPLE attribute for selecting more than one item.

<OPTION>

The <OPTION> tag is used at the beginning of an item within the <SELECT> beginning and end tags.

Tables

Previously, there was no good way to control text flow. There was no way to constrain text or graphics on a Web page. The team at Netscape Communications conceived the <TABLE> tag and its many features. Tables (with or without borders) can display information, whether it is a corporate spreadsheet or a graphic with a subtitle, in a clean, easy-to-read format.

<TABLE> : </TABLE>

This tag and its end tag encapsulate the tags and data that define the table. Tables are aligned left by default, but as with images, they can be centered by placing the <CENTER> tag above the <TABLE> tag and the </CENTER> tag after the </TABLE> tag.

<TABLE ALIGN=>

Just as with the <TABLE> tag, the text within the table cells is justified left by default. With the ALIGN attribute and its values (LEFT and RIGHT), you can place the text flush against the left or right margin of the text flow. This attribute is used differently than the ALIGN attribute in <TR>, <TD>, and <TH>. This attribute is supported only by Internet Explorer and Navigator.

<TABLE BGCOLOR=>

This Internet Explorer-only attribute enables you to make the table background color different from the background of the rest of the HTML document. As with other color attributes, the value is either RGB codes or color names (refer to Table 25.1). Individual table cells can be changed even from the table background color by adding the BGCOLOR attribute to the individual cell.

<TABLE BORDERCOLOR= BORDERCOLORLIGHT= BORDERDARK=>

This is another Internet Explorer-only set of attributes. These attributes enable you to change the color of the border surrounding the table. Again, the values are in RGB code or color names (refer to Table 25.1). BORDERCOLOR shades the middle part of the border, and BORDERCOLORLIGHT and BORDERCOLORDARK give the border a 3-D effect.

<TABLE BORDER=>

Without this attribute, the table would simply have a default border given by the browser. Internet Explorer and Navigator enable an integer value (pixels) with the BORDER attribute, which gives you the power to create borders of a certain pixel width. (See Figure 25.3.)

Figure 25.3 : A few of the most common <\<>TABLE> attributes.

<TABLE CELLSPACING=>

This Navigator only attribute controls the amount of pixel space between individual cells and the sides along the edges of the table. To make a thinner border between cells, give the value as follows:

<TABLE CELLSPACING=0>

<TABLE CELLPADDING=>

Like the CELLSPACING attribute, this is a Navigator-only attribute. CELLPADDING enables you to define the amount of pixel space between the cell border and the text inside of the cell.

<TABLE HSPACE= VSPACE=>

Just as with images (see the "Images" section) these attributes-supported only by Internet Explorer and Navigator-provide you with a way of allowing space (HSPACE for horizontal and VSPACE for vertical) around the table so that text and images surrounding the table aren't too close to it.

<TABLE VALIGN=>

This Internet Explorer-only attribute sets the vertical alignment of text within its cell for the whole table. To achieve this effect in Navigator, you must use the VALIGN attribute in the <TR>, <TD>, and <TH> tags for each individual cell (see the next section).

<TABLE WIDTH=>

Almost all current browsers simply make the table the size of the data inside that makes up the table. With Internet Explorer and Navigator, you can set the table width with the WIDTH attribute, which supports a pixel integer. Alternatively, you can set the width of the table by the percentage of the display window:

<TABLE WIDTH=75%>

This makes the table 75 percent of the size of the display window in the browser.

<TR> : </TR>

The Table Row tag creates each individual row within a <TABLE>. The <TH> and <TD> tags go between the beginning and ending <TR> tags. The attributes are as follows:

<TR ALIGN= VALIGN=>

These attributes enable you to change the alignment of the text within all cells in the row. ALIGN has a default of LEFT; VALIGN has a default of CENTER. ALIGN values are LEFT, RIGHT, and CENTER. VALIGN values are TOP, BOTTOM, and BASELINE.

<TR BGCOLOR=>

As described previously, this Internet Explorer-only attribute sets the color of the cells within the current row. Values are RGB code and color names.

<TR BORDERCOLOR= BORDERCOLORLIGHT= BORDERCOLORDARK=>

This is another Internet Explorer-only set of attributes. These attributes enable you to change the color of the border of the cells in the current row. Again, the values are in RGB code or color names (refer to Table 25.1).

BORDERCOLOR shades the middle part of the border, and BORDERCOLORLIGHT and BORDERCOLORDARK give the border a 3-D effect.

<TD> : </TD> and <TH> : </TH>

These tags go between the beginning and end <TR> tags, and they define the table data and cells. <TD> is Table Data that is plain text, and the <TH> tag is Table Header with a bolder font used for headers above or next to table data.

<TD ALIGN=>

Just as with the <TR> tag, the text within the table cells is justified left by default. With the ALIGN attribute and its values (LEFT and RIGHT), you can place the text flush against the left or right of the cell border. This attribute is supported only by Internet Explorer and Navigator. Refer to Figure 25.3.

<TD VALIGN=>

This enables you to change the alignment of the text within the cell. Values are LEFT, RIGHT, and CENTER. VALIGN values are TOP, BOTTOM, and BASELINE. (Refer to Figure 25.3.)

<TD WIDTH=>

With Internet Explorer and Navigator, you can set the cell width with the WIDTH attribute, which supports pixel integers (WIDTH=300). Alternatively, you can set the width of the cell by the percentage of the display window:

<TABLE WIDTH=75%>

This makes the table 75 percent of the size of the display window in the browser.

<TD COLSPAN=>

When you would like to have data occupy more than one cell across in a table row, use this attribute:

<TD COLSPAN=2>

This makes the data in that <TD> cell occupy the space of two horizontal cells. (Refer to Figure 25.3.)

<TD ROWSPAN=>

As with COLSPAN, this attribute tells the cell to occupy a certain number of cells going down:

<TD ROWSPAN=2>

This makes the data in a cell occupy the space of two cells in a vertical direction (down). (Refer to Figure 25.3.)

<TD NOWRAP>

The NOWRAP attribute is used to force data in a cell to continue on one line (unless there are <BR> and/or <P> tags in place), instead of enabling the data to wrap to the next line when it gets to the end of the cell border.

<TD BGCOLOR=>

As described previously, this Internet Explorer-only attribute sets the color of the cell. Values are RGB code and color names.

<TD BORDERCOLOR= BORDERCOLORLIGHT= BORDERCOLORDARK=>

This is another Internet Explorer-only set of attributes. These attributes enable you to change the color of the border of the cell. BORDERCOLOR shades the middle part of the border, and BORDERCOLORLIGHT and BORDERCOLORDARK give the border a 3-D effect.

Multimedia: Audio, Video, Applications

Lights, camera, action! Multimedia has arrived on the Web in full force, and HTML has been furiously trying to keep up with the tags necessary to encompass it all. Although Netscape Navigator has done a nice job lately with proposed HTML extensions, Microsoft Internet Explorer has jumped ahead in this area by creating easy-to-understand tags.

<BGSOUND>

The <BGSOUND> tag enables visitors using Internet Explorer to hear audio clips in the background while viewing a Web document. No file needs to be downloaded and separately played; all of this is done behind the scenes within Internet Explorer. All other browser applications simply ignore this tag, so it is safe to use on universal pages.

The attributes are as follows:

<BGSOUND SRC=>

This is a required attribute for the <BGSOUND> tag. As with other SRC attributes, this specifies the URL of the sound file. Only three different types of sound files are supported: .wav, .au, and MIDI files.

<BGSOUND LOOP=>

This attribute specifies the amount of times that the sound file is played. The two optional values are

<BGSOUND SRC="/audio/soundfile.wav" LOOP="8">

which is a numeric value, or

<BGSOUND SRC="/audio/soundfile.wav" LOOP="INFINITE">

This value naturally makes the sound file loop continuously as long as the page is loaded on the screen.

<MARQUEE> : </MARQUEE>

This is another Internet Explorer-only tag. It creates text that scrolls across the screen. <MARQUEE> is very similar to the Java Script effect in which the text scrolls at the bottom of the browser frame, except that you have control over where on the page the action takes place. The attributes are as follows:

<MARQUEE ALIGN=>

The <MARQUEE> tag is treated as an image, so this attribute enables text to flow around it. It accepts the values TOP, MIDDLE, and BOTTOM.

<MARQUEE BEHAVIOR=>

In order to control the direction, style, and duration of the text, you need the BEHAVIOR attribute. It accepts several values: SCROLL causes the text to come in from one side or the other (specified with the DIRECTION attribute). SLIDE causes the marquee to start with an empty box. When the text comes out, it stops so that it is visible in the box. ALTERNATE causes the text to start as fully visible in the box, and when the text reaches the end of the box, it reverses itself.

<MARQUEE DIRECTION=>

This sets the direction in which the text flows onto the screen. The values are LEFT (default) and RIGHT.

<MARQUEE LOOP=>

Like the LOOP attribute in <BGSOUND>, this attribute defines how many times the marquee is shown. Again, the values are either numerical (1, 2, 3, and so on) or INFINITE for never-ending repetition.

<MARQUEE BGCOLOR=>

As with all other BGCOLOR attributes, this enables the specification of the background color in the marquee box. Accepted values are RGB code (#FFFFFF) or color names.

<MARQUEE HEIGHT= WIDTH=>

These attributes determine the size of the marquee box. If these attributes are not used, the marquee box extends the entire width of the browser display window and is just tall enough to enclose the height of the text. Values are either in pixels (200) or a percentage of the browser display window (50 percent).

<MARQUEE HSPACE= VSPACE=>

These attributes enable space around the marquee to separate it from surrounding text. Values are given in pixels, like this:

<MARQUEE HSPACE="5" VSPACE="5">

This creates a five-pixel space around the marquee.

<MARQUEE SCROLLAMOUNT= SROLLDELAY=>

Use these attributes for controlling the smoothness or quickness of the marquee text. SCROLLAMOUNT values are given in pixels, with lower numbers creating slow but smooth movement and larger numbers creating fast and jerky motion.

SCROLLDELAY is the number of milliseconds that the text waits between successive scrolling. Larger numbers create slower delays, and lower numbers make quicker movements.

<APPLET> : </APPLET>

This tag is supported only by Hot Java (Sun Microsystems) and Netscape Navigator. <APPLET> defines the application to be used in the current document. The following attributes define the placement and behavior of the application to be loaded.

The attributes are as follows:

<APPLET ALIGN=>

As with the <IMG ALIGN=> attribute, this attribute defines the alignment of the <APPLET> with regards to the surrounding text on the page. Values include ABSMIDDLE, ABSBOTTOM, BASELINE, BOTTOM, MIDDLE, TOP, and TEXTTOP, along with LEFT and RIGHT.

<APPLET ALT=>

Using this attribute is a very good idea. Similar to images, the text placed as the value here is displayed if there is a problem in loading the application.

<APPLET CODE=>

The CODE attribute defines the type of <APPLET> code that is to be used. The value should be the name of the class or the package.

<APPLET CODEBASE=>

This defines the URL in which the CODE is located.

<APPLET NAME=>

As with forms, this enables you to provide a unique name for the <APPLET>.

<APPLET HEIGHT= WIDTH=>

These determine the size of the <APPLET> display area. Values are either in pixels (200) or percentage of the browser display window (50 percent).

<APPLET HSPACE= VSPACE=>

Similar to the <MARQUEE> tag covered earlier, these attributes enable space around the marquee to separate it from surrounding text. Values are given in pixels, like this:

<APPLET HSPACE="5" VSPACE="5">

This would create a five-pixel space around the <APPLET>.

<PARAM>

Although this tag does not have content or an end tag, it is used within the beginning and end <APPLET> tags to specify parameters.

The attributes are as follows:

<PARAM NAME= VALUE=>

Some <APPLETS> enable you to supply information in which to define a certain part of an application. In that case, you could use these attributes. Suppose that you have a calendar application, and you want to specify what year to display. It might look like this:

<APPLET CODE="Calendar">

 <PARAM NAME="Year" VALUE="1997">

</APPLET>

Frames

Frames are the latest and greatest feature of HTML. They give a lot of power back to the Web designers that keeps the visitor within the Web site they are perusing while still enabling them to link to other sites.

<FRAMESET> : </FRAMESET>

This is another Navigator-only tag, and it is the main tag that defines the size and location of all frames in the document. The <FRAMESET> replaces the <BODY> tag in frame documents. You must exclude all other HTML tags other than the <HEAD> and <TITLE> tags or Netscape will ignore the frame tags altogether.

Frame documents do not contain data themselves; instead, they contain <FRAME> tags that point to URLs that will fill in the frames specified in the <FRAMESET> tags.

The attributes are as follows:

<FRAMESET ROWS= COLS =>

These attributes define the number of columns as well as the size of the columns and rows of frames and framesets. Both attributes can accept values in pixels or a percentage of window view to occupy (separate row values with a comma such as 200,350,100). Like tables, Navigator will not extend the frames outside of the viewing window. Instead, it creates scrollbars within the framesets. Frameset documents do not have scrollbars surrounding the entire document, as regular HTML documents do. When using percentages, the numbers do not have to necessarily have to add up to 100 percent. Navigator adjusts and resizes each frame to fit the window.

A nice feature value with these attributes is the * value, which is the equivalent of a wild card. If you know exactly what pixel size or percentage of space you want the first frame to be and the other row (as in the following example) you want to fill the empty space (you never know how big a visitor's browser window is), use this value:

<FRAMESET ROWS="200,*">

In this case, one frame will be 200 pixels wide and the second frame will fill whatever space is left over. (See Figure 25.4.)

Figure 25.4 : A simple <\<>FRAMESET> document.

<FRAME>

This tag is placed between the beginning and ending <FRAMESET> tags; together with the SRC attribute (covered next), it specifies the URL of an HTML document to be placed in a specific frame.

The attributes are as follows:

<FRAME SRC=>

The required source attribute specifies the URL of the HTML document that is to be placed into the frame. There are no limitations on what these HTML documents can contain-applets, Java, animations, and so on. (Refer to Figure 25.4.)

<FRAME NAME=>

The NAME attribute is optionally used in conjunction with Navigator's TARGET attribute for anchoring (the <A> tag). See <A TARGET=> for more information on this technique.

<FRAME NORESIZE>

With Navigator version 2.0, visitors could resize the frames as they chose, which would ruin the layout that you created. (Version 3.0, which is in beta at the time of this writing, is supposed to change this.) The NORESIZE attribute locks the proportions of a frame so that it cannot be manipulated. Here is an example:

<HTML>

<HEAD><TITLE>Figure 25.4</TITLE></HEAD>

<FRAMESET COLS="20%,*" NORESIZE>

<FRAME SRC="frame1.html">

<FRAME SRC="frame2.html">

</FRAMESET>

</HTML>

<FRAME SCROLLING=>

Normally, if the content of a frame fits in the allotted space, no scrollbars appear. If the SCROLLING value is set to YES, scrollbars appear whether they are needed or not. When the value is NO, scrollbars will not be added to the frame.

<FRAME MARGINHEIGHT= MARGINWIDTH=>

These attributes are similar to the HSPACE and VSPACE attributes in tables. Use these to create space around a frame. Values are in pixels.

<NOFRAMES> : </NOFRAMES>

Considering that there are very few browsers capable of viewing frames, this tag is a very good idea (and pretty courteous to those with non-frame compliant browsers). Use this tag only within the "main" <FRAMESET> tag (if you are nesting <FRAMESET> tags).

Any text placed within the beginning and end tags is ignored by frame-compliant browsers but comes up for all other browsers. Typically, this tag is used to point visitors to a non-frame URL or to the first HTML document in the <FRAMESET>, assuming that it is linked to the rest of the pages. Here is an example:

<NOFRAMES>

If you are viewing this, your browser does not support frame documents.

Don't worry! We've thought ahead and built our site to be navigational

with non-frame browsers. Here's the link to our

<A HREF="noframes.html">Home Page</A>. 

</NOFRAMES>

<A TARGET=>

This attribute was explained briefly earlier in the NAME attribute section. This attribute to the <A> tag enables you to direct a URL to come up in a specific frame window. Suppose that you named your largest frame like this:

<FRAME SRC="frame1.html" NAME="main-frame">

In this case, you could have links in other frames. (Typically, designers place a narrow "table of contents" frame along one side of the window.) You could also have the document come up in the large frame. Here's what the tag would look like:

<A HREF="page1.html" TARGET="main-frame">Page One</A>

What if you have a bunch of HREFs? Do you have to type the TARGET attribute on every one? Not when you use the <BASE TARGET=> tag.

<BASE TARGET=>

This tag, placed within the <HEAD> and </HEAD> tags in the HTML document, enables you to specify a target for all HREFs included in the current document. For example, with the code written as it is here, all three HREFs will go to the "main-frame" target frame.

<HTML>

<HEAD>

<TITLE>Links!</TITLE>

<BASE TARGET="main-frame">

</HEAD>

<BODY BGCOLOR="White">

<FONT SIZE=6>Here are some links!</FONT>

<P><A HREF="page1.html">Page One</A>

<P><A HREF="page2.html">Page Two</A>

<P><A HREF="page3.html">Page Three</A>

</BODY>

</HTML>

Summary

If you are an old HTML hacker, you can probably see that HTML has come a long way since its "college days," so to speak. If you are new to HTML programming, we "old HTML hackers" think that you've got it made. Thanks to the latest extensions explained in this chapter, you don't have to spend hours upon hours trying to come up with a clever way to display information in a visually pleasing manner.

The best advice I can give to anyone venturing into the HTML world (or to someone just trying to keep up with the new extensions) is to visit as many Web sites as you can stand. If you see some layouts that you like, use the "View Source" feature of your Web browser application to see how it was done. There's no better way to learn HTML "tricks" than by seeing it in action and implementing it on your own Web pages.