The HyperText Markup Language, or as it is more commonly referred to, HTML, is the formatting language of the World Wide Web. It is derived from SGML (Standard Graphical Markup Language), a complex specification for marking up text. HTML is a series of instructions that the browser uses to display the content of the document being received. One of the main benefits of HTML is that it is platform independent. Any operating system/application combination that can display HTML formatted documents can be a participant on the Web.
The HTML language is governed by the World Wide Web Consortium standards group, and the current revision level is 2.0. I will be covering a number of HTML tags from version 2.0 and some of the newer tags in the proposed version 3.2. For the most recent revision activity on the HTML standard, check out the W3C Web site at http://www.w3.org/pub/WWW/MarkUp.
One key point about HTML development that you need to understand, is that in addition to the formatting attributes which you specify, you will also specify the logical connections or links between pages. This capability to hyperlink within and between documents enables you to seamlessly travel between related topics. This gave birth to the idea of The Web.
This quick tour is not intended to be a comprehensive HTML reference, but it will provide you with an introduction to the language and enable to you start creating HTML documents right away.
The HTML language is composed of tags, elements, and attributes. You'll take a quick look at each of these components, and then move on to creating your first Web page.
The tags define a specific set of formatting instructions that apply to the content within the tag scope. A tags scope is defined as anything contained between the starting tag <TAG> and the ending tag </TAG>.
An element is a specific formatting instruction. For example, the <H1> tag contains the Heading One element.
The attributes of an element are enclosed within the starting tag of the element. Attributes are additional parameters that provide extra formatting information for the browser. For example, in the tag <A NAME="TOP" TITLE="START"> the attributes associated with the element Anchor are NAME and TITLE.
An HTML document is structured around three main formatting sections, or document structure tags. Start with Listing F.1 to illustrate the document tags, and then examine each tag individually.
Listing F.1 F1.htm-A Simple Web Document: Hello World
<HTML> <HEAD> <TITLE> My First Web Page </TITLE> </HEAD> <BODY> Hello World! </BODY> </HTML>
The first thing that you notice are the funny looking delimiters around some of the text. Words enclosed within the < > delimiters are tags. These are the tags discussed previously, and they are instructions to the browser about how and, sometimes, where to display the content within the document. In this case, the content is Hello World!, as shown in Figure F.1.
A simple Web page can be created by using just a few tags.
As a rule, tags should always be the same case. The industry standard is uppercase, but you may use upper- or lowercase, as long as you are consistent. So, for starting and ending tags, you may use <TAG></TAG> or <tag></tag>, but don't use <TAG>/<tag>. Using mixed case is inconsistent and will only cause confusion for the next developer who maintains your code.
Document structure tags are used to break the document into functional pieces. They enable someone who is viewing your document source to quickly and easily understand the outline of the document, and its overall structure.
This is the document structure tag that is always at the top of your HTML page. Notice also that the end of the document will have a closing HTML tag as well </HTML>. Most tags have an opening and a closing tag. The closing tag is identified by the slash / in front of the tag name.
This is another document structure tag that identifies the page heading in the document. You will find information about the document within the <HEAD> tags. The title for the page is usually placed in the head section as well.
The body section is the last of the document structure tags. The <BODY> tag is a notification that the body of the document (the content of the page) follows. Be sure to include the </BODY> tag at the end of the document, before the closing </HTML> tag.
You are not required to include the document structure tags in your HTML document. Most browsers display a page without document tags perfectly well. But, to ensure that your intent is clear and that you conform to the HTML specification, always include the document structure tags within your Web pages.
Take a minute to see how the preceding sample code will look in your browser. Now, you have two choices to complete the next exercise. If you currently connected to the web, hop over to the on-line edition of this appendix at http://www.mcp.com/que/asp/appendixf. From here, you can select Listing F.1, and it will open the document in your browser. For those of you who wish to practice actually creating your first page, follow these simple steps:
For Internet Explorer users:
For Navigator users:
You should now see your first Web page in your browser. It should appear very similar to the page shown in Figure F.1. Good Work!
<TITLE>. The title tag is not a document structure tag, but it does reside within the <HEAD> tags. The title in most browsers shows up as the title on the browser window. This is also the text that is added to the Favorite Sites or Bookmarks when your users add the site to their personal site lists.
Be sure to make your document title short and unambiguous. It will be the first item that your users see and will also be their reference for the page in the future. As a painful example, consider the titles: Mary and John's Wonderful Home Page, Which Describes Their Full And Exciting Lives versus Mary and John's Home Page.
There are a number of tags that enable you to format text and to apply a variety of styles to it. Take a brief look at the definition of these tags, and then move on to the additional examples.
Use this tag to delineate paragraphs. It groups text into logical units and adds a carriage return to the document after the paragraph is displayed. This tag requires a </P> end tag when formatting text. When used alone to add a carriage return, no end tag is required.
<P>The very long road to the wizard's house happened to be paved with yellow bricks. Am I on the road less traveled?</P>
The browser does not include the white space or the line-feeds between the lines of your HTML file. If you create multiple paragraphs without using the <P>aragraph tags, all the text will run together as one long paragraph. If you want to add blank lines between paragraphs, use the <P>aragraph tag without the closing </P> tag.
This tag can be used within other tags to provide a line break between words or sections. The main difference between the line break tag and the paragraph tag is that the line break tag does not include an additional carriage return, as you can see in Figure F.2. For example,
Listing F.2 F2.htm-The Paragraph Tag Adds an Additional Carriage Return
<HTML><HEAD> <TITLE>Paragraph and Line Break</TITLE> </HEAD><BODY> <P> I continue along the road of yellow bricks when <BR> I happen to notice a straw filled shirt, puffy pants <BR>and a hat hanging in what appears to be a wheat field</P> <P>Now, I ask, are we in Kansas anymore?</P> </BODY></HTML>
The paragraph tag adds a carriage return after the text.
<BLOCK QUOTE> Block Quote Tag.
The Block Quote tag is used to specify a quotation. You can freely use the <BR> tag within a block quote tag group.
<BLOCK QUOTE>Four score and seven years ago, our forefathers<BR> brought forth on this continent a new nation, conceived in liberty<BR> and dedicated to the proposition that all men are created equal.</BLOCKQUOTE>
In addition to the text formatting tags, there are a number of tags that are used to change the appearance of selected characters, words, or text within a block. These formatting commands, found in Table F.1, apply a logical character style, which implies that the formatting is implicit within the browser, not explicitly stated in the tag.
Table F.1 Logical Formatting Tags
| Tag | Characteristic | Description |
| <EM> | Emphasized | Emphasizes the text |
| <STRONG> | Stronger emphasis | Might be bold |
| <CODE> | Code sample | Formatted with a fixed font |
| <SAMP> | Similar to <CODE> | Used for samples |
| <KBD> | Keyboard commands | Instructs user input |
| <VAR> | Variable | Represents a variable |
| <DFN> | Definition | Explains a term or concept |
| <CITE> | A citation | Used for short quotations |
All of the logical formatting tags require a start and an end tag. Here is an example of how you might use some of these tags:
<P><EM>Hey!</EM>he shouted as they walked away.<STRONG>Wait up</STRONG> he said in an even louder voice.</P>
In addition to the logical styles, there are also physical styles that affect the displayed text, which are shown in Table F.2.
Table F.2 Physical Formatting Tags
| Tag | Characteristic | Description |
| <B> | Bold | Applies the bold style to the text |
| <I> | Italic | Applies an italic style to the text |
| <TT> | Typewriter | Applies a mono-spaced typewriter font |
All of the formatting tags in Table F.2 have specified suggestions to the browser about the format and style of the text. Figure F.3 shows how these styles will appear in a typical browser. Notice on the example line that you can nest logical and physical styles. To achieve a bold, italic, you can enter the tags like:
<B><I>Wait Up</B></I>
You can apply logical and physical styles to document text.
In Listing F.2, there is no explicit control over the white space between characters. To illustrate this ignoring of white space by the browser, consider the following two lines of HTML: They produce the exact same output on the browser.
<P>Here is a paragraph with embedded spaces</P> <P>Here is a paragraph with embedded spaces</P>
The browser will remove all spaces between words after the first one encountered in the string. This ignoring of embedded spaces will happen within all the HTML tags except one.
The only formatting tag that requires the display to emulate the format of the content as it is passed in is the <PRE>Formatted text tag. Using this tag ensures that the white space around the characters is preserved. This tag is useful when you want the text to be formatted as typed in the HTML file. For example, if you want to create a picture from the text in your document, enclose it in the <PRE> tag to ensure that it will be displayed as input. For example,
<PRE> /\--\ /\--\ / \ \ / \ \ /____\--/____\__\ | oo | | oo | | | __ | | __ |oo| | || |vV| || |Vv| vvVVVvVvVvVvVvVvv </PRE>
Just for fun, you might try enclosing the preceding picture in the paragraph tags <P> instead of the <PRE> tags. It will end up looking like one long line of characters. Not exactly the message that you are trying to convey!
There are a number of tags that you use to create lists of items, which is useful in a variety of situations. You can create ordered lists, numbered lists, lists of terms and definitions-almost any configuration that you can dream up. You can also nest lists of the same type and of differing types together.
The unordered list tag creates a list of bulleted items. The bullet is determined by the browser. Within each of the list tags, you enter list items with the <LI> tag. The <LI> tag does not include an end tag. For example,
<P>Guaranteed list for successful campfire meeting</P> <UL> <LI>Marshmallows <LI>Hershey Bars <LI>Graham Crackers </UL>
The menu list is the most basic list tag. It creates a list but does not include any indenting or bullets.
This tag creates an ordered list. Each of the list items will be sequentially ordered when the items are displayed. If you nest the ordered list, the numbering restarts at 1 for each nested group, as you can see in Figure F.4. For example,
<OL>
<LI>Item 1, Group 1
<OL> Group 2
<LI>Item 1, Group 2
<LI>Item 2, Group 2
</OL>
<LI>Item 2, Group 1
</OL>
Nested ordered lists start at 1 within each nested level
The glossary list tag creates a listing that has a list item and then a list description. It ends up looking like a glossary in your browser. Instead of list items, <LI>, a glossary list has matched pairs of <DT> terms and <DD> definitions. Here is what the glossary list looks like in action:
<DL>
<DT> macarena <DD> A new dance that my children have mastered,
but sadly, I have not
<DT> macaroni <DD> Dinner of choice for college students
and recent grads
</DL>
You can also mix the list types by nesting the types together, as shown in the following code and illustrated in Figure F.5:
<OL>
<LI>Flowers
<UL>
<LI>Sunflower
<LI>Rose
</UL>
<LI>Dogs
<UL>
<LI>Poodle
<LI>Retriever
</UL>
</OL>
You can nest and mix list types within your documents.
In each of the listings, we have indented the listings to separate the lists visually, as well as in the HTML document when it is displayed. There is no requirement for formatting the HTML; the browser even ignores extra blank spaces. By using intelligent spacing and comments, however, your code will be readable and easily maintainable.
The following tags do not fall into any of the categories outlined previously, yet are very important in their own right.
In any development environment, you need to be able to add comments to your source code to enable you and those that work on the code after you to understand your intentions for the page. The comment tag allows you to add these notes for yourself and other Web developers. Incidently, the comment tag is also used in scripting as the delimiters of the script code. For example:
<SCRIPT LANGUAGE="VBScript"> <!-- Dim aVariable 'we have created a variant variable aVariable = "5" 91`now it looks like a string aVariable = aVariable + 5 'now it looks like an integer with a value of 10 --> </SCRIPT>
See "Scripting and HTML" for more information about scripting and script tags, in Chapter 6.
The horizontal line is very useful for dividing the page into logical groupings. It does just what you think it would do: It creates a horzontal line all the way across the page.
The capability to click on a topic or graphic and go to another related document is what makes the World Wide Web a Web. This simple functionality enables you to walk (or should I say surf) from document to document, just like following the strands of a web toward your ultimate destination. Of course, many of us just surf without any particular destination in mind! To enable this movement within and between pages, there is a special tag that is used-the anchor tag.
<A> Link/Anchor. This element has a number of attributes that define the link or anchor that you want to jump to. An anchor is a location within a page. So, if you want to go to a location within the current page, you can link to an anchor on that same page. If you want to go to another document, you link to that document's URL. If you want to go to a document and a particular place within that document, you link to the URL and the anchor within the target document. Confused yet? Take a look at the link/anchor tag attributes and you will start to understand:
<A NAME="PROJECTS" HREF="HTTP://WWW.MELNICK.COM" TARGET="MAIN">
The HREF attribute specifies the location to jump to when the link is activated. The NAME attribute names this anchor so that it can be accessed or jumped to from another part of the same page or another page altogether. Here are some examples of links that will jump from the same page to this anchor:
<A HREF="#PROJECTS">
and from another page to this page and anchor:
<A HREF="HTTP://WWW.MELNICK.COM#PROJECTS">
Notice that to jump to an anchor, you precede the anchor name with a pound (#) sign.
The text for an anchor in the browser is highlighted with a color specified in the LINK attribute within the BODY tag. Once the link is selected, the color changes, so the client can see where he has been. This is refered to as an explored link. Even days later, if a page is still in the browser cache, and the page is requested again, the explored links will still be apparent.
In addition to linking to other pages, you can also use a special set of tags to provide an e-mail command that brings up a pre-addressed e-mail form on the client's browser. The first additional tag is the <ADDRESS> tag. This formats the text with an address style. Along with the <ADDRESS> tag, you also want to change the protocol on the HREF statement from http to mailto: Here is an example:
<A NAME="RETURNMAIL" HREF="mailto:Selfanbaum@worldnet.att.net"> <ADDRESS>Selfanbaum@worldnet.att.net</ADDRESS></A>
If you haven't already noticed, you can nest multiple tags. Just be sure that you always close the tags in order. If you are nesting three tags, be sure that their order is <T1><T2><T3></T3></T2></T1>. If you enter the ending tags in a different order, you are sure to get unpredictable and unwanted results.
There are a number of other attributes of the anchor tag not discussed here. You learn about some of the other attributes such as TARGET when you examine frames in the section "Working With Frames" later in this appendix. For a complete listing of the attributes of the <A>nchor tag, please see the HTML specification or pick up one of the many available HTML reference books. You can view the HTML specification on-line at http://www.w3.org/pub/WWW/MarkUp/.
One of the most attractive and interesting features of browsing on the Web is the incredible variety of graphics that you come across: everything from classical art to new wave. These days, even the control buttons on the pages are colorful. To add images to your Web page, all you need to do is use the image tag.
<IMG> Image. The image tag has a number of attributes, the most important one being the image source. You implement the image tag as follows:,
<IMG SRC="myimage.gif"> or <IMG SRC="images\myimage.gif">
You can enter the image source in relative or absolute terms, relative to the location of the document, or an absolute path to the file. Once you have the image, you can decide where you want to place it on the page, in relation to the last text that was put into the HTML stream. To tell the browser where to place the image, use the ALIGN attribute of the <IMG> tag.
<IMG SRC="myimage.gif" ALIGN=TOP>
The image alignment attribute can be set to TOP, MIDDLE, BOTTOM, LEFT or RIGHT. The vertical image alignments are in relation to the text line in which the image is being displayed. When you use the LEFT or RIGHT alignment, this also instructs the browser to wrap any text immediately following the image tag around the graphic.
One of the most common activities that you will use images for is linking to other pages or to a higher-resolution image than the one being displayed. The image tags that you have seen so far have all been in-line images. These images show up within the page that is being displayed. If you place an image in an anchor tag (in the HREF attribute), that image file will be returned to the browser for display when the link is selected.
The first code line shown as follows illustrates an image linking to another document. The second line shows an image linking to a higher-resolution image for display in the browser.
<A HREF="http://www.melnick.com"><IMG SRC="melnick.gif"></A> <A HREF="http://www.melnick.com/monet.jpg"><IMG SRC="monet.gif"></A>
One of the best ways to provide your users with a cohesive picture of the places they can jump to from a page is through the use of image maps. Image maps are just like using image tags with one important distinction: You can send the user to different places depending on where on the image they click. Imagine that you have a Web site illustrating a newly constructed home. You create an image map from a blueprint of the house. As a user clicks on the different rooms of the house, he would be taken to additional images of those rooms. Image maps provide an easy and intuitive way to select a link.
Image maps can be implemented on the client side (CSI Maps), on the server side (SSI Maps), or on the client side with additional code to implement the map on the server if the browser does not support client side mapping. The latest browsers from Microsoft, Internet Explorer 3.01 and Netscape Navigator 3.0 support client- side image maps. Client-side image maps provide a number of advantages over server-side maps. First, they can be created and tested locally, only requiring a browser. Second, they will reduce the number of hits on your server, always helpful at a busy site.
The first requirement when creating image maps is a program that will generate, or help generate, the map for you. For a good list of available image map utilities, check out the image maps section on yahoo at http://www.yahoo.com/Computers/Internet/World_Wide_Web/Programming/Imagemaps/.
Creating Client Side Image Maps.
The <MAP> tag is used within your document to describe the client side image map. Here is a quick example that will give you an idea of how it looks within a document:
<MAP NAME="imgmap"> <AREA SHAPE="RECT" COORDS="100,15,191,74" HREF="/img/house.gif"> <AREA SHAPE="RECT" COORDS="66,21,128,74" HREF="/img/car.gif"> <AREA SHAPE="RECT" COORDS="22,21,55,74" HREF="/img/boat.gif"> </MAP> <IMG SRC="/img/townmap.gif" USEMAP="#imgmap">
The <MAP> </MAP> tags define the image map named imgmap. When the image is added, the USEMAP attribute is set to the map name to use when processing the click on the image. Regions can be circles, rectangles, or complex polygons. Again, the easiest way to generate the mapping information is to use an image utility. One of our favorite tools for creating client-side image maps is Live Image version 1.1. It has a 14-day trial and is an easy to use, powerful program. Live Image can be found at http://www.mediatec.com.
All you need to do is insert the map into your document and provide an image with a reference to the map. The rest is handled by the browser.
The best image maps are those with clearly defined regions. Picaso's pictures would be better than Monet's. A flowchart would be better than a patchwork quilt. Get the idea?
Creating Server-Side Image Maps.
Server-side image maps involve creating a map file on the server. The map file is set as the reference for the image file within the <IMG> tag. When the image file is clicked, the map file is called, which in turn, calls a cgi or isapi program, passing in the coordinates of the click. Within the HTML file, the image map link is added as shown here:
< A HREF="http://www.yourhost.com/cgi-bin/imagemap/picmap.map"> <IMG SRC="/pic.jpg" ISMAP BORDER=0></A>
The first line sets the anchor and reference to the picmap.map mapping file. The image to be clicked is pic.jpg. The ISMAP attribute identifies the image as an image map. When the image is clicked, the image map processing program on the server will be invoked, and the new link will be launched.
On the server, the image map can be implemented using the CERN or NCSA standard. The image map processing cgi program that you are using on your site will determine which format to use. An example of an NCSA type image map file that might support a product line image is shown here:
default /products/imap/default.htm rect /products/imap/a.htm 35,80 135,160 rect /products/imap/b.htm 144,58 215,145 circle /products/imap/c.htm 10, 15 20
The points after the rectangle specify the top left and bottom right corners of the region. You specify a circle by selecting the center of the circular region, and then by specifying the radius in pixels. A polygon is defined by specifying a list of the connecting points, in order around the region.
Client-Side Maps with Server-Side Alternative
If your clients may have browsers that do not support client-side image maps, the best implementation is to provide support for client AND server-side maps. For those browsers that do support client-side maps, it is one less hit against your server. To ensure that all your users can have access to the image map functionality, you will include a default for a server-side image mapping file. To do this, you include the USEMAP attribute and the ISMAP attribute within the anchor. Those browsers that support CSI maps will process them within the browser. Those that don't will ignore the USEMAP attribute and call the server-side map. An example of this dual function usage follows:
<a href="/cgi-bin/imagemap/works/workman.map">
<img src="workman.gif" USEMAP="#Work" ISMAP>
There are two ways that you can set the background for the display of your Web pages. The first is by setting the background color attribute of the <BODY> tag.
<BODY BKCOLOR=#FFFFFF>
The background color attribute sets the background color to the RGB value that is specified in the attribute. The attribute accepts a six position hexadecimal number in which the first two places represent the R(red), the second two the G(green), and the third, the B(blue) value. The values for each parameter can range from 0 to 255. If you are running Windows95 or WindowsNT, an easy way to get the RGB values for a color is to use the color option within the Display Properties dialog. To invoke the dialog:
Each time you select a color on the wheel, the RGB values are shown. Once you have found the right color, copy down the RGB values and add them to your BKCOLOR attribute. Just be sure to select Cancel from the color dialog, or you might inadvertently change the background color of your Windows desktop!
The second way to enhance the appearance of the background is by specifying an image that will be tiled on the browser window. Once again, this is an attribute of the <BODY> tag.
<BODY BACKGROUND="tilepic.gif">
It is very tempting to create a brightly colored background or to use a busy image for the tiled background of your page. Just remember that even though you want your page to be aesthetically pleasing, the ultimate goal is to enable the user to view the content without being distracted by a noisy or busy page.
As you move from page to page on the Web, you will notice that the text within the pages you visit, as well as the links and explored links, have many different colors. You can specify the color for the text, link and vlink (explored link) within your document, just as you selected the background color within the BODY tag, by adding additional attributes. For example:
<BODY BKCOLOR="FFFFFF" TEXT="#336699" LINK="#003366" VLINK="#0099cc">
The attributes BKCOLOR, TEXT, LINK, and VLINK set the color of the background, the text, the links, and explored links respectively. A link initially has the color specified in the LINK attribute. When a link has been followed, its color changes to that specified in the VLINK attribute.
The ability to create tables within your Web pages enables you to provide a wealth of informative content in an easy to read and easy to reference format. Before the table tags were supported by most browsers, you were stuck with manually formatting the table, using a combination of the <PRE> tag, and spaces within the HTML lines. A number of different vendors have added additional functionality (extensions) to the table specification, such as the support for variable size borders found in Netscape Navigator 2.0 and above, and Internet Explorer 3.0 and higher. The basic <TABLE> elements and attributes are covered as follows.
You have surely deduced this already, but a table is created by using the <TABLE> tag. Jump right into the following example, and then can step back and examine the various attributes of the table element.
<HTML>
<HEAD>
<TITLE>Using Tables</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<CAPTION ALIGN="TOP">Some Teams and Some Scores</CAPTION>
<TR>
<TH>Redskins</TH>
<TH>Chiefs</TH>
<TH>Colts</TH>
</TR>
<TR>
<TD>13</TD>
<TD>44</TD>
<TD>12</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Once again, notice that the indents in the code do not affect the page display at all. It is just a way to help ensure that your start and end tags match, as well as to give you a sense of the logical nesting of the tags. In Figure F.6, you see the sample table as shown in a browser.
Tables are a good replacement for the <PRE> tag.
The table element has one attribute that we added within the <TABLE> tag, BORDER. This adds a border around the table. A table consists of rows and cells within a row. In a row, you can have heading cells and data cells (within which you can have images, lists-almost anything).
<TR> Row. The row tag encloses cell headings and cell data items. There is no requirement for all the rows to have the same number of cells. The browser compensates as best it can with odd numbers of cells within rows.
<TH> Cell Heading. Use these tags to denote the headings of the table. The headings might be across the top, down the left side, or on both axes.
<TD> Cell Data. The cell data tags surround data elements in the table. You can also specify images to reside in the cell. To insert an in-line image into a cell of a table, specify the tag as follows:
<TD ALIGN="CENTER"><IMG SRC="cellimg.gif"></TD>
Notice that we have also added another attribute of the cell data element ALIGN. The cell data, as well as the cell heading, can be aligned horizontally or vertically. The horizontal alignment attribute is ALIGN, and the vertical alignment attribute is VALIGN. The default for both attributes is Center and Middle, respectively. The values that you can use for ALIGN are TOP, CENTER, and BOTTOM. Valid values for the VALIGN attribute include LEFT, MIDDLE, and RIGHT. In Listing F.3, you can see that it is valid to place most any tag type within a table cell, even image tags.
Listing F.3 F3.htm-Adding Styles, Lists and Other Tags to Table Cell Contents<HTML>
<HEAD>
<TITLE>Important Reminders</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<CAPTION ALIGN="TOP">To Do Items This Week</CAPTION>
<TR>
<TH>Monday</TH>
<TH>Tuesday</TH>
<TH>Wednesday</TH>
<TH>Thursday</TH>
<TH>Friday</TH>
</TR>
<TR>
<TD>Take out the trash</TD>
<TD>Pick up Kids at School
<UL>
<LI>Danny at 3:00
<LI>Joey at 3:45
</UL>
</TD>
<TD>Dinner with Parents</TD>
<TD>Library Book Sale</TD>
<TD>Plan for Weekend
<UL>
<LI>Get Flowers
<LI>Order Dinner
<LI>Pick Up Tux
</UL>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Another useful formatting element is the COLSPAN attribute of the <TH> or <TD> tags. This forces the cell to span a number of columns. Listing F.4 shows how this is useful when grouping multiple columns together.
Listing F.4 F4.htm-The Colspan Attribute: Useful for Grouping Columns Within a Table
<HTML>
<HEAD>
<TITLE>Class Team Listing</TITLE>
</HEAD>
<BODY>
<TABLE BORDER>
<CAPTION ALIGN="TOP">The Teams and Their Scores</CAPTION>
<TR>
<TH COLSPAN=2>Blue Team</TH>
<TH COLSPAN=2>Red Team</TH>
<TH COLSPAN=2>Green Team</TH>
</TR>
<TR>
<TH>Harrient</TH> <TH>Jordan</TH>
<TH>Bobby</TH> <TH>Lisa</TH>
<TH>Reggie</TH> <TH>Jonas</TH>
</TR>
<TR>
<TD ALIGN="CENTER">25</TD> <TD ALIGN="CENTER">35</TD>
<TD ALIGN="CENTER">25</TD> <TD ALIGN="CENTER">30</TD>
<TD ALIGN="CENTER">20</TD> <TD ALIGN="CENTER">25</TD>
</TR>
<TR>
<TD ALIGN="CENTER" COLSPAN=2>60</TD>
<TD ALIGN="CENTER" COLSPAN=2>55</TD>
<TD ALIGN="CENTER" COLSPAN=2>45</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Figure F.7 shows the COLSPAN attribute in action. It is Listing F.4, displayed within a browser.
The COLSPAN attribute visually groups columns together
The ALIGN attribute and the COLSPAN attribute work very well together. You can nest most tags within other tags. You will surely encounter a number of pages with tables nested in tables nested in tables. If you are not sure whether a particular tag can be nested, give it a try. As you create pages with just HTML, it is very easy to save the file and load it from your browser to see if your code will work.
When you begin to develop your Active Server applications, many times it is easier to create the framework for your pages using HTML only and then add the scripting code later. This could be considered a form of RAD (rapid application development). This way, you can show your users (client) the pages as they are being prototyped and fill in the logic as the interface is singed off on.
As a general rule, you will want to test the appearance of your pages on at least a few (OK two) of the major Web browsers, the latest revisions of Netscape Navigator and Microsoft's Internet Explorer. This will ensure that the vast majority of your users will have a rich and satisfying experience at your Web site.
Forms processing on the Inter/Intranet is one of the most important pieces to the HTML puzzle. By using forms, you provide a structured interaction with your users. They can enter information into the forms for data update, request custom information, and generally interact on an individual level with your Web application.
Traditionally, forms processing was handled by CGI scripts that were written in a variety of languages. With the introduction of the Active Server Pages, you can process forms using the power of the Visual Basic Scripting code.
The server side of forms processing is discussed in Chapter 11, "Building a Foundation of Interactivity with Request and Response Objects." In this section, we will be focusing on the HTML commands and syntax that are used to create the forms within the browser. Once you have a firm grasp on creating the form on the client, you can move into scripting the request object in the chapter referenced above, which processes the form on the server.
A form is created on a browser with the <FORM> tag. There are a number of attributes that you can use when creating a form. You can start with the short example found here:
<FORM METHOD="POST" ACTION="http://www.proc.com/form2.asp"> … </FORM>
The METHOD attribute specifies how the form will be sent to the processing script or CGI application on the server. There are two values you can set the METHOD attribute to, GET and POST. The POST method returns the form data to the server on a separate data stream. The GET method puts the return data into an environment variable called QUERY_STRING, which the server can then parse. The ACTION attribute is the script/CGI program that is used to process the form.
There are a number of form interface elements that you can add to your forms such as entry boxes, combo boxes, list boxes, text areas, check boxes, radio buttons and command buttons. Listing F.5 creates a sample form page that illustrates many of the form interface objects. Figure F.8, which follows the listing, shows the form as displayed within a browser.
Listing F.5 F5.htm-Interface Elements Found Within a Form: Input Boxes, Radio Buttons, and Check Boxes.
<HTML>
<HEAD>
<TITLE>Fun With Forms</TITLE>
</HEAD>
<BODY>
<P>Please enter the required information so that your membership
application can be processed.</P>
<FORM METHOD="POST" ACTION="http://www.noserve.com/procform.asp">
<P>Last Name: <INPUT TYPE="Text" NAME="LastName" SIZE=40>
First Name: <INPUT NAME="FirstName" SIZE=25>
</P>
<P> Address: <INPUT NAME="Address" SIZE=60> </P>
<P> City: <INPUT NAME="City">
State: <INPUT NAME="State" SIZE=2>
Zip Code: <INPUT NAME="ZipCode">
</P>
<P> Select a User Id: <INPUT NAME="UserId" MAXLENGTH=8> <BR>
Select a Password: <INPUT TYPE="Password" NAME="UserPass" MAXLENGTH=8">
</P>
<P> Your Computer Type: <BR>
<INPUT TYPE="RADIO" NAME="COMPTYPE" VALUE="IBM">IBM Compatible
<INPUT TYPE="RADIO" NAME="COMPTYPE" VALUE="MAC">Apple Mac/Power PC
</P>
<P> What Computer Magazines are you receiving? (Check all that apply)<BR>
<INPUT TYPE="CHECKBOX" NAME="PCMag" VALUE="UNCHECKED">PC Magazine<BR>
<INPUT TYPE="CHECKBOX" NAME="InfoWorld" VALUE="UNCHECKED">Info World<BR>
<INPUT TYPE="CHECKBOX" NAME="PCWeek" VALUE="UNCHECKED">PC Week<BR>
<INPUT TYPE="CHECKBOX" NAME="Computerworld" VALUE="UNCHECKED">ComputerWorld
</P>
<P>How did you hear about our organization?<BR>
<SELECT NAME="HowHear">
<OPTION>Business Associate
<OPTION>Magazine
<OPTION>Trade Publication
<OPTION>Your Mother
</SELECT>
</P>
<P>Any Additional Comments you might wish to make:<BR>
<TEXTAREA NAME="Comment" ROWS=15 COLS=45>
</TEXTAREA>
</P>
<INPUT TYPE="SUBMIT" VALUE="Submit Membership">
<INPUT TYPE="RESET" VALUE="Reset Form">
</FORM>
</BODY>
</HTML>
A form within a browser resembles a data input dialog in any application.
Now take a few moments to look at each of the new tags, which represent controls on your form. The tag that adds controls to a form is the <INPUT> tag. This tag has a number of attributes that govern the type, placement, size, and default value of the control.
The first attribute is TYPE. (See Table F.3.) The TYPE attribute specifies the type of control that is added to the form. The VALUE attribute specifies the default value of the control.
Table F.3 User Interface Control Types
| Type Specifier | Widget Type | Value |
| "TEXT" | Entry Field | - |
| "RADIO" | Radio Button | Value returned when selected |
| "CHECK" | Check Box | True or False for check |
| "SUBMIT" | Submit Button | - |
| "RESET" | Reset Button | - |
The next control that we encounter in our script is the combo box. This control is specified by using the <SELECT> tag. This tag also has a number of attributes, as well as <OPTION> tags, which are used to specify the items in the list.
The NAME attribute is the name of the combo box. You can also specify the MULTIPLE SIZE=N attribute, which displays the list in list box format with N items showing in the list.
There are numerous permutations and combinations that you can use when designing your forms. Although we are not going to look at all of the options for creating forms, you can specify colors, special fonts for headings, and a number of other attributes to make your forms more attractive. With the addition of Java Applets and ActiveX controls, the possibilities for forms processing have been greatly expanded.
A great way to align the text and entry boxes within a form is to put them into a table.
Using frames in your Web pages enables you to create virtual windows within a single page. This enables you provide links to multiple locations from within the same document that are independent from each other.
This powerful new frame functionality is not implemented in all browsers today, so if you are going to implement frames, be sure to also have a link to a non-frame version of your page.
In the wonderful world of frames, there are two types of documents that are used. The first is the layout document. This is the document that informs the browser how to divide the client window into logical rows and columns, and tells the browser which documents to place in each "frame." The second document in the frames world is the type that you have been learning about up to this point, a content document. The only real difference in the content documents that you have seen up to this point concerns where a followed link will be displayed within the framed page. First tackle the layout document, and then move on to the links within the content document.
To create a layout document, start with the generic HTML document tags template and replace the <BODY> </BODY> tags with <FRAMESET> </FRAMESET> tags. The <FRAMESET> tag alerts the browser that frame layout information follows. If a browser does not support frames, everything found within those tags will be ignored. Within the <FRAMESET> tag, you specify the number of rows and/or columns that create the frame. There are three ways that you can specify how the page is logically divided.
The rows and columns are specified in pixel width and height. To create two rows of fixed 100 pixel height and one row that will be the size of the browser window minus 200 pixels, you would code the FRAMESET tag as follows: <FRAMESET ROWS="100,100, *". The * is a special symbol that means the remaining space on the page.
You can also specify the rows and/or columns, using a relative size. For example, you can create three columns, each one half as big as the next (For example, 100, 50, 25), with the syntax: <FRAMESET COLS="2*, 2*, *"
The final type enables you to create the frames as a percentage of the page. To create two rows of equal height, you would specify the tag as <FRAMSET ROWS="50%,50%">.
Regardless of how you specify the logical frames, you must now add the content documents to the frames. The easiest way to understand this is to see it in action: Create a simple framed document. Using the following code, you create two columns, with a list of links on the left and a content window on the right.
Frames.htm <HTML> <HEAD> <TITLE> Frames Are Easy</TITLE> </HEAD> <FRAMESET COLS ="25%,75%"> <FRAME src="left.htm" NORESIZE SCROLLING="NO"> <FRAME src="right.htm" SCROLLING="YES" NAME="main" BASE TARGET="_SELF"> </FRAMESET> </HTML>
There are a few things to notice right away. You have divided the page into two columns. The documents are placed by using the <FRAME> tag in the order that they are declared. The first document, left.htm, will fill the first column, and the second document, right.htm, will fill the next. Take a look at the attributes of the <FRAME> tag in Table F.4
Table F.4 <FRAME> Tag Attributes
| Attribute | Description |
| SRC | The source document for the frame. |
| NORESIZE | The frame will not be sized by the user. |
| SCROLLING | Yes or No, can or can not scroll the frame window. |
| NAME | The name by which other frames reference this frame. |
| BASE TARGET | The target of the links. SELF points to the current frame; TOP removes all frames and loads a full page into the browser. You can specify a TARGET on the link if you do not set a BASE TARGET in the <FRAME> tag. |
| MARGINWIDTH | Width of the left and right margins in pixels, minimum value of 1 if used. |
| MARGIN HEIGHT | Same as MARGINWIDTH for height, minimum value of 1 if used |
Now look at the content documents within this simple frames document.
Left.htm <HTML> <BODY> <A HREF="newright1.htm" TARGET "main">A New Main Frame</A><BR> <A HREF="newright2.htm" TARGET "main">Another Main Frame</A><BR> </BODY> </HTML>
Notice that the target of the links are "main", which was the name given to the second column frame in the layout document frames.htm. This ensures that when the link is selected, the new page will be loaded into the second column frame. Continuing on:
Right.htm <HTML> <BODY> <P>I am a content document within a frame. Many times, I have wished I could just <A HREF="newright1.htm"> <STRONG>replace<STRONG> </A>myself</P> </BODY> </HTML>
In the right.htm, the link does not have a target. In the layout document, we set the BASE TARGET to SELF for the right.htm content document. This ensures that any links activated from this page will be loaded into the same frame that right.htm now occupies. Figure F.9 shows the completed frame document in action.
Frames are a quick and easy way to combine multiple pages within a single view.
You have taken "A Quick Tour" through the HTML language. As the language continues to mature and extensions today become the revisions of tomorrow, your accomplishments via HTML and the Active Server will only get better and more interactive. But until then, this short appendix should give you a sense of the HTML language as well as a jump-start to get you up and running with Active Server.
There are a number of excellent HTML language books available at your bookstore. Any serious Web developer should own one. Even though much of the work is being done for us these days by HTML generators such as Microsoft's FrontPage 97, or Netscape Navigator Gold, it is always useful to understand what is going on behind the scenes. It will give you a better understanding of the environment and make you a better Web developer.
© 1997, QUE Corporation, an imprint of Macmillan Publishing USA, a Simon and Schuster Company.
