Body Elements

Team-Fly

Body elements define and format the contents of the document, including text formatting, links, and importing graphics into the document.

Anchor Element

Links on Web pages are called anchors and enable the reader to move from one page to another. The general format for the anchor element is

<a HREF="URL" NAME="NAME1" TARGET="TARGET1"> text </a>

If the HREF attribute is used, the “URL” can be any valid URL, including images, other HTML documents, telnet, or FTP sites. If the NAME attribute is used, then “NAME1” allows this anchor to be the target of a link. For example, if the element

<a NAME="CHAPTER1">The First Chapter</a>

is located in a file labeled document.html, it can be accessed from an anchor (in or out of this document) as follows:

< HREF="document.html#CHAPTER1">Go to Chapter 1</a>

The target attribute indicates where the new data is to be displayed. If it is not defined, then the current browser window is overwritten. Other values can be

  • _blank. Displays the new document in a new window.

  • _name. Displays the new document in a frame (with the matching name attribute).

  • _self. Overwrites the contents of the current window.

  • _parent. Displays the new document in the parent window (if no parent, this value is the same as self).

  • _top. Displays the new document in the entire window (disregards frames).

General Text-Formatting Elements

The following elements are used for text formatting. Note that different browsers may display these elements with slight variations.

<b>. . .</b>

Use bold font.

<big>. . .</big>

Use big font.

<i>. . .</i>

Display text in italics.

<strike>. . .</strike>

Strikethrough text.

<sub>. . .</sub>

Subscript text.

<sup>. . .</sup>

Superscript text.

<u>. . .</u>

Underline text.

<em>. . .</em>

Emphasize text.

<font color="color" size="size"> . . . </font>

Color and size of font (color is detailed in the next section); size “1” for small through “7” for large.

<blockquote>. . .</blockquote>

Format extended quotations. Typically, browsers provide extra indentation on both sides and highlight the text.

<center> . . . </center>

Center text.

<code> . . . </code>

Separate a computer listing from the rest of the document. Typically monospaced.

Color Attribute

Color in HTML pages can be achieved using either an RGB value or a standard English color name as an attribute for various elements. Examples of elements where color can be specified are <body bkcolor=“color”> and <font color=“color”>. The RGB value is represented as #XXYYZZ, where XX, YY, and ZZ represent a hexadecimal value for red, green, and blue, respectively. A value of 00 indicates none of the color, whereas FF indicates full intensity of the color.

The standard English colors, along with their equivalent RGB values, are as follows:

Red

#FF0000

Orange

#FFA500

Yellow

#FFFF00

Green

#00FF00

Blue

#0000FF

Indigo

#8A2BE2

Violet

#EE82EE

Brown

#A52A2A

Black

#000001

White

#FFFFFF

Hierarchy Header Elements

HTML contains six elements with which you can create a hierarchy within a document. The elements are named <h1> through <h6> and have ending tags (that is, <h1> . . . </h1>). The top level is <h1>.

Note 

These header elements should not be used for general text sizing. For that, use the font element mentioned in the “General Text-Formatting Elements” section.

Image Element

To add any kind of graphical content to a page, you need to use the <IMG> element. The following is the general form of the <IMG> element:

<img src="/books/1/557/1/html/2/URL" align="POS" border="size" height="size" width="size" alt="text" >

The src attribute points to the URL of the graphic image to be displayed. The graphic image can be anything that the browser supports. Typical formats include .gif, .jpg, and .avi. The align attribute can have the value of top, middle, bottom, right, or left. The border, height, and width attributes can be assigned values, which are measured in pixels. The last attribute, alt, is used for browsers that do not display graphics; instead, the text string is shown.

Separators

The basic elements that HTML provides to separate sections of text are as follows:

  • <br> New line.

  • <hr> New line plus place a horizontal line on the document. Attributes that can be used with the <hr> element are align, color, width, and size.

  • <p> . . . </p> Starts a new paragraph. Usually the browser inserts a blank line between paragraphs.

Lists

HTML enables you to display several types of lists, including ordered, unordered, menu, and definition.

  • <hl> . . . </hl> Displays the list header text.

  • <li> . . . </li> Displays an item within an ordered, unordered, or menu list.

  • <ol> . . . </ol> Displays ordered lists. Basic attributes for this element are start and type. Type values for the <ol> element are A (uppercase), a (lowercase), I (large Roman numerals), i (small Roman numerals), and 1 (numbers).

<ol start="5" type="1"> <li>Item 5</li> <li>Item 6</li> </ol>
  • <ul> . . . </ul> Displays unordered lists such as bulleted lists. The <ul> element has the attribute type, which can have the values circle, disc, and square.

  • <dl> . . . </dl> Displays definitions. Elements that are used with <dl> are <dt></dt> and <dd></dd>, which contain the definition term and the definition itself, as shown here:

<hl>Definitions</hl> <dl> <dt>term1</dt><dd>Definition 1</dd> <dt>term2</dt><dd>Definition 2</dd> </dl>

Tables

The <TABLE> element is very useful for organizing data within a page in a grid pattern. Other elements, <TR>, <TD>, <TH>, and <CAPTION>, are used with the <TABLE> element to define the headers, rows, and data portions of the table.

<table> <caption> . . . </caption> <tr><th> . . .</th> . . . </tr> <tr><td> . . .</td> . . . </tr> </table>

The attributes of the <TABLE> element are shown in the following list. See the end of this appendix for an example of how the <TABLE> element is used.

  • ALIGN. Controls the alignment of the entire table on the HTML page. Valid values include left, center, and right.

  • BGCOLOR. Controls the background color for the entire table.

  • BORDER. Controls the width of the border around the table. If this value is 0 or the attribute is missing, the table will have no borders.

Caption Element

The <CAPTION> element labels a table. Its align attribute can have the values of left, right, top, or bottom.

Table Row Elements

The <TR> element indicates to the browser that a new row in the table has started. The attributes of the <TR> element apply as defaults for the whole table row; they are align and valign.

  • Align. Controls the alignment of data within each cell in the row. Valid values include left, center, right, and decimal.

  • Valign. Controls the vertical alignment of material within the cell. Valid values include top, middle, and bottom.

Table Header and Table Data Elements

The <TH> element provides column headings. Browsers typically make the font for the column headings a bit bigger and put them in a bold typeface. The <TD> element populates the data in a single cell in the table.

Both of these elements have the same basic attributes:

  • Align. Controls the alignment of data within each cell in the row. Valid values include left, center, right, and decimal.

  • Valign. Controls the vertical alignment of material within the cell. Valid values include top, middle, and bottom.

  • Colspan. Specifies the number of columns the cell spans.

  • Rowspan. Specifies the number of rows the cell spans.

  • Nowrap. Indicates to the browser not to wrap the text in the cell.

Form Element

The <FORM> element is basically used to coordinate the retrieval of input data and send it to the appropriate place, such as a server, through a CGI (Common Gateway Interface). A Web page can contain many <FORM> elements, but you cannot nest them. A generic <FORM> element can look like this:

<form action="url" method="method" enctype="XX"> . . . Data Input elements . . . </form>

The attributes for the <FORM> element are as follows:

  • Action. Specifies the destination of the input. This attribute can be as simple as a mail address, but usually points to a server-based script.

  • Method. Has two possible values: Get and Post. Get builds up a URL with the contents of the input fields that have values (and all hidden input fields) and sends it to the destination specified by the action attribute. Post sends the data directly to the URL specified in the action attribute.

  • Enctype. Defines the encoding method for the data; the default is URLENCODED (that is, the data is embedded in the URL).

Input Element

The <INPUT> element represents a field that the user can edit. The major attributes for this element are listed below, and most of these attributes are used in the example at the end of this appendix.

  • Type. Defines the type of input area desired. Possible values are Button, Checkbox, Text, Radio, Submit, Reset, Hidden, Password, Image, and Textarea.

  • Align. Used with images to define the location of the image. Possible values are top, bottom, middle, right, left.

  • Checked. Applies to radio buttons and check boxes and indicates that the field is selected.

  • Maxlength. Defines the maximum amount of data for text fields.

  • Name. Specifies the name of the input field. Used when the data is transferred from the page, such as ITS (Internet Transaction Server) with SAP.

  • Size. Specifies the visible size of the text input field.

  • SRC. Contains the URL of the image if the input field is of type IMAGE.

  • Value. Specifies the default value of the <INPUT> element.

Select Element

The <SELECT> element allows the user to select from a list of text choices. This element has the following attributes:

  • Multiple. Allows the user to select more than one choice.

  • Name. Specifies the name of the field, and is used when the data is transferred from the page to an application like ITS.

  • Size. Specifies the number of visible choices.

Option Element

The <OPTION> element is used only within the <SELECT> element, and specifies one of the possible values to be selected. This element has the following attributes:

  • Selected. Indicates that this value is a default value.

  • Value. Specifies the value to be sent to the CGI script when the page is submitted.

The following example uses both the <SELECT> and <OPTION> elements.

<select name="fieldname"> <option value="1">First</option> <option value="2" selected>Second</option> <option value="3">Third</option> </select>

Textarea Element

A <TEXTAREA> element is a multiline input text area. This element has the following attributes:

  • Rows. Specifies the number of visible rows on the page.

  • Cols. Specifies the number of visible columns on the page.

  • Wrap. Determines how text wrapping is handled. A value of “OFF” indicates no wrapping. “Virtual” indicates that the long lines are wrapped on the page but are sent as one long line when the data is transferred to the CGI script. “Physical” indicates that long lines are wrapped and are also sent this way to the CGI script.

Java Applets

Java applets can be included within HTML by using the <APPLET> element. The attributes for this element are as follows:

  • Codebase. Contains the URL that is the base for the code directory.

  • Code. Contains the URL for the location of the applet code.

  • Alt. If a browser does not support applets, the text assigned to this attribute is displayed.

  • Name. Specifies the name of the applet.

  • Align. Specifies the text alignment of the applet. Valid values include left, right, top, middle, and bottom.

  • Vspace, Hspace. Allow for offsets of the initial applet area.

  • Width, Height. Give the initial size (in pixels) of the applet display area, not counting any windows or dialog boxes that the applet brings up.

  • <Parm> Element. Provides the means to pass parameters to the applet. The attributes for this element are simply NAME and VALUE, which correspond to the name of the parameter and the value to be passed in.


Team-Fly


Java & BAPI Technology for SAP
Java & BAPI Technology for SAP
ISBN: 761523057
EAN: N/A
Year: 1998
Pages: 199

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net