This appendix is not meant to be a HTML tutorial. Instead, it provides brief descriptions of what the authors think are the most useful tags, as well as all the tags used in the book. For a comprehensive tutorial guide to HTML, we suggest "Teach Yourself Web Publishing with HTML 3.0 in a Week" by Laura Lemay (Sams Publishing, 1995).
The <HTML> and </HTML> tags mark the beginning and end of the HTML file respectively.
The text enclosed in the <TITLE> and </TITLE> tags is displayed by the browser in the title area—most often the browser's application title bar.
Descriptive information, such as the title and document type, are enclosed in the HEAD tags.
The BODY tags mark the beginning and end of the document body. These tags are not required for the document to look correct on most browsers, but it is proper HTML practice to put them at the beginning and end of the document, respectively. A number of attributes can be set in the body tags.
<BODY BACKGROUND = "back.gif">
The BACKGROUND attribute sets the background to a tiled series of the image back.gif. You can also set the color of the document text, links that have or have not been visited, and active links, as shown in the following lines:
<BODY TEXT = "#rrggbb"> <BODY LINK = "#rrggbb"> <BODY ALINK = "#rrggbb"> <BODY VLINK = "#rrggbb">
http://www.biola.edu/cgi-bin/colorpro/
This sets the text, link, activated link, and visited link to the color where rr as the amount of red, gg as the amount of green, and bb as the amount of blue. The numbers provided are hexadecimal in the range of 00 — FF. Many utilities generate the values of these values automatically from a color dialog box, or sliders for the red, green, and blue colors. A wonderful online resource for color setting is the ColorServer Pro site at http://www.biola.edu/cgi-bin/colorpro/.
<BODY BACKGROUND = "back.gif" TEXT = "#rrggbb" LINK = "#rrggbb" ALINK = "#rrggbb" VLINK = "#rrggbb"> (Insert HTML document here) </BODY>
Microsoft Internet Explorer 3.0 supports named colors wherever a color attribute can be used. For example, <BODY TEXT=TEAL> causes the text in the document to be teal.
HTML provides many ways to format the look of text appearing in your Web documents. Table B.1 lists many of the tags for formatting textual information.
|
Tag |
Description |
|
<B> </B>
|
Applies boldface to text between tags.
|
|
<BLINK> </BLINK>
|
Causes any text between the tags to blink.
|
|
<CITE> </CITE>
|
Used to offset a citation from a book or magazine article. Browsers typically display citations in italics.
|
|
<CODE> </CODE>
|
Offsets a source code program listing. The browser usually displays this in a smaller monospaced font.
|
|
<DFN> </DFN>
|
Styles a definition of a term. Browsers typically display definitions in italics.
|
|
<EM> </EM>
|
The text between these tags is emphasized. Most browsers use italic to show emphasized text.
|
|
<FONT SIZE = #> </FONT>
|
Sets the font size (#) used to display the HTML appearing between the tags. Default is 3; the range is 1 to 7.
|
|
<H#> </H#>
|
The # in the <H#> tag specifies the heading level—a number between 1 and 6, with 1 as the largest size and 6 as the smallest.
|
|
<I> </I>
|
Text occurring between the tags is displayed in italics.
|
|
<KBD> </KBD>
|
The Keyboard tag is used to represent keyboard keys such as the Del or Enter keys On most browsers this is displayed in a smaller monospaced font.
|
|
<PRE> </PRE>
|
Preformatted text is displayed without any special formatting. This is a good tag to use if you want to maintain spacing over several lines; also an easy way to put tabs into your document.
|
|
<MARQUEE> </MARQUEE>
|
(Microsoft Internet Explorer 2.0/3.0 Only) This tag causes the text within to scroll, by default from left to right across the screen. The attributes of the MARQUEE element are as follows:
|
|
__ALIGN
|
Specifies that the text around the marquee should align to the TOP, MIDDLE or BOTTOM of the marquee.
|
|
__BEHAVIOR
|
The valid settings for this attribute are SCROLL, SLIDE, and ALTERNATE
|
|
___SCROLL
|
The default, repeatedly scrolls the text from one side of the screen to the other, then repeats.
|
|
___SLIDE
|
Scrolls the text across the screen, and when it hits the margin, stops.
|
|
___ALTERNATE
|
Bounces the text from margin to margin.
|
|
__BGCOLOR
|
This sets the background color of the marquee.
|
|
__DIRECTION
|
The direction can be either the default LEFT, or RIGHT. This specifies the start direction either left to right, or right to left, of the marquee.
|
|
__HEIGHT
|
Sets the height of the marquee either in pixels (HEIGHT = n) or in a percentage of the screen (HEIGHT = n%).
|
|
__WIDTH
|
Similar to the HEIGHT attribute, but applies to the width of the marquee.
|
|
__HSPACE
|
Sets the left and right margins for the outside of the marquee in pixels.
|
|
__LOOP
|
Specifies the number of times the marquee should scroll. If left undefined, set to -1 or INFINITE, the marquee scrolls until the user leaves the page.
|
|
__SCROLLAMOUNT
|
Sets the number of pixels to move the text between redrawing of the marquee text.
|
|
__SCROLLDELAY
|
The number of milliseconds between movements of the marquee text.
|
|
__VSPACE
|
Sets the top and bottom margins of the outside marquee in pixels.
|
|
<SAMP> </SAMP>
|
Shows a group of literal characters. Most browsers display this as a monospaced font.
|
|
<STRIKE> </STRIKE>
|
Text enclosed in these brackets appears struckout. |
|
<STRONG> </STRONG>
|
Another way of drawing attention to a special section of text; <STRONG> usually is displayed in bold by most browsers.
|
|
<TT> </TT>
|
Displays in a typewriter style (monospaced) font.
|
|
<U> </U>
|
Text occurring between the tags is displayed underlined. |
Figures A.1 through A.4 demonstrate how Netscape Navigator and Microsoft Internet Explorer display various headings and text formatting tags.
Figure A.1. Headings displayed by Microsoft Internet Explorer.
Figure A.2. Headings displayed by Netscape Navigator.
Figure A.3. Text Formats displayed by Microsoft's Internet Explorer.
Figure A.4. Text Formats displayed by Netscape Navigator.
These tags enter the text or image enclosed in the tags.
This aligns the text to the left, center, or right of the browser display.
This aligns the enclosed text to the left, center, or right and gives the text the heading level of the number that replaces the two # symbols.
To insert an image into a Web page, simply use the <IMG> tag. The tag has the following elements:
|
SRC=URL
|
The URL that points to the image file.
|
|
ALIGN
|
The ALIG element specifies how the image will be aligned relative to text and other elements near the image. Many value are available and won't be covered here.
|
|
ALT=text
|
Specifies the text (typically paced within quotation marks) to be displayed if the Web browser is incapable of displaying images or if the image was not loaded correctly for some reason.
|
|
HEIGHT=h WIDTH=w
|
Specifying the height and width of the image allows the Web browser to set aside enough space for the image before it actually retrieves the image. This aides the Web browser in rendering the entire document when all images haven't yet been retrieved. |
An example of embedding an image into a Web page is
<IMG SRC=Picture.gif HEIGHT=100 WIDTH=65 ALIGN=TOP ALT="A Picture">
HTML documents are hypertext documents. This means that they can contain links to other documents. The anchor (<A> </A>) tag is used to specify a link to another document or resource to be loaded when the user clicks the link. The text and any other HTML appearing between the anchor tags appears to the user as a hotlink, usually colored differently than regular browser text or underlined. The following sections describe the attributes of the anchor tag.
HREF = "URL" specifies the URL of the resource to be displayed after the user clicks on the anchor. As an example, <A HREF="http://www.microsoft.com"> specifies a link to the Microsoft Web site.
The NAME attribute specifies the name of a location within the current HTML document that can be linked to by a link from another page. This enables other documents to reference the specific anchor in a page. To reference a named anchor, the URL of the page is specified, then a #, followed by the name of the anchor. For example, <a name="Copyright"> defines a link named Copyright within the current document.
This attribute, although not required, allows the page designer to include the title of the page that the anchor references.
This specifies a URN (Universal Resource Name) for the target document.
Tables are implemented in both Internet Explorer 2.0 and , as well as Netscape 1.1 and later. Tables are a good way to logically group information that would otherwise appear in a spreadsheet. Using tables is also, in some cases, a convenient way to display database records.
The following code contains an example of a basic table:
<TABLE BORDER = 5> <TR> <TD>1</TD> <TD>2</TD> <TD>3</TD> <TD>4</TD> </TR> <TR> <TD>5</TD> <TD>6</TD> <TD>7</TD> <TD>8</TD> </TR> </TABLE>
Figure A.5. Simple table as displayed by Netscape Navigator.
The following are the attributes of the TABLE tag and their effects on the table.
The BORDER attribute sets the width of the border as displayed by the browser. Experiment with the browser you use and the information within to find the optimum setting.
The CELLSPACING attribute determines the amount of space the browser places between each individual cell and the space between the cell and the border (if the cell is on the outer edge of the table). Again, experimentation works well to find an appropriate value.
The CELLPADDING attribute determines the amount of space the browser places between the data in the table cell and the border around the cell. The greater the value in CELLPADDING is, the more room around the actual value in the cell. Within the table tags, three other tags define the header, rows, and cells. These tags are the table header <TH>, table row <TR>, and table data <TD>.
The following are the attributes of the <TABLE> element.
The WIDTH attribute can be set either as a number defining the absolute width in pixels, or as a percentage of the browser's viewing space. The browser can stretch the table, but it does not compress the table if the size of the browser window is smaller than that of the table.
With ALIGN, you can specify left, center, or right alignment of the table.
As with the <BODY> tag, you can set the background color of tables using the BGCOLOR attribute, you can either use the #rrggbb color definition, or, if you're designing for Internet Explorer, you can specify the color by name (for example, <TABLE BGCOLOR = RED). The #rrggbb color values follow those of the <BODY> tag as described at the beginning of this appendix.
This works similar to the BGCOLOR attribute but applies to the tables external and internal borders.
This setting is optional and sets the color of the thin line around the top and left sides of the entire exterior of the table and the bottom right sides of the interior of the table. These colors can be modified to enhance or change the default 3-D appearance.
This setting functions as the exact opposite of BORDERCOLORLIGHT, coloring the bottom and right sides of the exterior and the upper and left sides of the interior cells of the table.
The table header element functions the same as the table data <TD> element, except the table header element is displayed in a bold font. The valid attributes for the table header element are ROWSPAN, COLSPAN, ALIGN, VALIGN, NOWRAP, BGCOLOR, BGCOLORDARK, and BGCOLORLIGHT. The attributes function similar to the table elements but affect only the header cell that they are set in.
The table data element marks the beginning and end of each cell in the table. The valid attributes for the table data element are ROWSPAN, COLSPAN, ALIGN, VALIGN, NOWRAP, BGCOLOR, BGCOLORDARK, and BGCOLORLIGHT. These elements are described in the following sections.
This attribute specifies the number of rows the cell should stretch; for instance, if ROWSPAN is set to 3, that cell will span three normal rows in the table.
This attribute specifies the number of columns the cell should stretch; for instance, if COLSPAN is set to 3, that cell will span three normal columns in the table.
Inserting the NOWRAP attribute keeps the text of the cell all on one line.
The table row element marks the beginning and end of each row in the table. The valid attributes of the table row element are; ALIGN, VALIGN, BGCOLOR, BGCOLORDARK, and BGCOLORLIGHT.
The CAPTION tags are placed within the table tags, but not within row, heading, or cell tags. The text in the CAPTION tags defines the associated caption of the table. The following are the valid attributes of the CAPTION tag.
The valid settings for the ALIGN attribute for Netscape are TOP and BOTTOM; Microsoft's Internet Explorer includes TOP, BOTTOM, LEFT, and RIGHT, CENTER.
With VALIGN, you can specify the vertical alignment of the data within the table cells. This attribute is set within the <TD> tag of the cell to be aligned. Valid settings are TOP, MIDDLE, and BOTTOM. Not specifying the tag results in center aligned (MIDDLE) text. For example, <TD VALIGN=TOP>Top Aligned</TD> specifies a cell that will be aligned with the top of the row.
Forms are the way to get feedback from the visitors to your Web site. Beginning and ending with the <FORM> and </FORM> tags, the fields within these determine the size and type of input fields. Although you can have multiple forms on a page, you cannot nest forms.
The attributes of the form element are described in the following sections.
This specifies the URL of the resource that will carry out the action on the form data, and give the user a response.
ACTION = "http://www.execpc.com/~haasch/search"
This can either be the default GET or POST. Using GET, the query appends the form data to the end of the URL; using POST, the data is sent via an HTTP post transaction.
The following sections describe the various elements that can be placed within a form.
The INPUT element specifies the user interface to enter information. The following are the attributes for the INPUT tag.
For checkboxes and radio buttons, this attribute can be set to TRUE (checked) or FALSE (unchecked).
MAXLENGTH indicates the maximum number of characters that can be entered into a textbox.
This specifies the name of the form control. This is used to identify the data elements on the form to the resource that processes those elements. It's also used by VBScript (described in Appendix B, "Visual Basic Script Reference") to provide similar functionality to control names in Visual Basic.
This specifies the size of the form control. This can either be specified in a single value, representing the width in characters of the control, or in a width/height pair.
This specifies the image to be displayed with the control.
This sets the type of control to use. The following is a list of available controls:
|
CHECKBOX
|
The checkbox control is a simple TRUE/FALSE control, where checked is TRUE, and empty indicates FALSE
|
|
HIDDEN
|
This control is not displayed to the viewer of the page. It can be used to send state information back to the form-processing program.
|
|
IMAGE
|
This causes the form data to be submitted immediately, the value passed back from the image is the x, y coordinates in pixels.
|
|
PASSWORD
|
This functions the same as a textbox, but the text is echoed as asterisks instead of the letters typed.
|
|
RADIO
|
This functions much like the CHECKBOX control, but only one option button in the group may be selected at a time.
|
|
RESET
|
When a RESET button is clicked, the form data returns to the initial values specified in the form's data element definitions. The VALUE attribute can be set to give the RESET button a label.
|
|
SUBMIT
|
Clicking this button submits the form data to the FORM ACTION URL.
|
|
TEXT
|
This control is used to gather a single line of text. SIZE and MAXLENGTH attributes can be set to restrict the size of user input and the appearance of the text control.
|
|
TEXTAREA
|
This control is used for multiline text input. The SIZE and MAXLENGTH attributes have the same function as the TEXT control. |
The SELECT tags mark the beginning and end of the data in a listbox or a drop-down selection list. The following are the attributes for a the SELECT element.
|
MULTIPLE
|
The multiple attribute enables the user to select more than one item from the listbox. The user holds the CTRL button and clicks on the different items to select them.
|
|
NAME
|
This specifies the name of the SELECT element.
|
|
SIZE
|
This sets the height of the list control. |
The OPTION element sets off each selection in the textbox or listbox. The following are the attributes of the OPTION element:
|
SELECTED
|
This attribute sets the default value of the text or list box.
|
|
VALUE
|
This is the return value of the element that is selected. |
With Netscape 2.0 and above, the browser is able to display frames that contain different sets of HTML code.
The FRAMESET element is the container element for a group of frames. Its two attributes are ROWS and COLS.
The ROWS tag specifies the amount of space given to each row. The number can be specified in pixels, in percent by placing a % after the value, or as a relative value by placing an asterisk (*) in place of the value.
The syntax for the COLS attribute is the same as that of the ROWS attribute.
The FRAME element specifies the properties for each individual frame in the frameset. Because it contains no text, there is no corresponding end-tag. The attributes of the FRAME tag are as follows.
The SRC attribute specifies the URL source for the frame.
The NAME attribute is used to assign a name to the frame, so it can act as a target from other URLs.
This allows the page designer to specify the width of the frame border in number of pixels.
This works the same as MARGINWIDTH except it affects the height of the margin.
The valid settings for the SCROLLING attribute are YES, NO, and AUTO. If set to YES, a scrollbar is provided for the frame; NO results in no scrollbar; and AUTO provides a scrollbar if the document size exceeds the size of the frame.
Specifying this attribute prevents the user from dragging the margins of the frame to cause them to resize. Default is to allow the user to resize the frames.
The data within the NOFRAMES tags is ignored by form-capable browsers. This set of tags allows information to be displayed to non-forms capable browsers.
