Hypertext markup language, or HTML, is the primary language used to display and exchange information on the Web. HTML is probably the easiest computer-based language to learn and use, which accounts for its popularity. HTML is not a new technology, but for the AS/400 programmer, it has only recently begun to prove itself as a useful tool.
HTML was developed in 1989 by Tim Berners-Lee, who created the language while working at CERN, The European Laboratory for Particle Physics, in Switzerland. The first Web servers were UNIX computers, followed by Microsofts Windows NT Server with Internet Information Server. When IBM introduced HTTP serving capabilities to the AS/400, AS/400 programmers began to pay more attention to HTML. If you know HTML, you can use AS/400 programming tools such as Common Gateway Interface (CGI), Net.Data, Java servlets, and JavaServer Pages running in WebSphere Application Server.
What Is HTML?
HTML is a markup language, which describes the structure and appearance of the contents of a document. Tags are placed around parts of the document to describe or format it. Tags are also used to link files, insert graphics, create forms, embed scripts, and execute programs. HTML tags are interpreted by the browser, which renders a Web page based on its content and tags.
A tag begins with the < character and ends with the > character. The name of the tag is placed between the opening and closing delimiters. Most tags use an opening tag and a closing tag to enclose the content; the closing tag is indicated by the opening delimiter sequence and closingtag. You indicate that one section of text is a paragraph by placing tags around it, as follows:
This is a paragraph.
This is a paragraph.
Some tags are used alone, such as the break tag,
. They do not have a closing tag because they do not enclose content. The browser renders content as designated by the following tag:
This sentence is on one line.
This sentence is on one line.
And this sentence is on another line.
HTML tags can also have attributes. Attributes are characteristics or properties that further describe the structure or appearance of the content. Most attributes are optional, but some are required. An attribute is assigned a value. For example, the
tag shown below has an ALIGN attribute with a value of CENTER. The image tag () shown below must have a source (SRC) attribute, whereas the WIDTH and HEIGHT attributes are optional.
An HTML document is an ASCII text file and can be created using any text editor. The tags are not case-sensitive. The document begins with an opening HTML tag () and ends with a closing HTML tag (). The HTML document is divided into two parts: head and body. The head is identified by thetags and contains information processed by the browser, such as a scripting language. Title tags (
The body is identified by thetags and contains the content of the Web page that appears in the browser window. The basic tags needed for an HTML document are as follows:
There are currently about 50 HTML tags. Although you can use most tags anywhere, some can only be used with certain other tags. Tags are grouped into categories according to the type of function they perform.
Structural tags break up an HTML document into sections. The most frequently used structural tags are paragraph (); break (
); horizontal rule (
), which inserts a horizontal line; and division (
Formatting tags, such as bold () and italic (), change the appearance of text. Six heading tags (through ) control the size of the font from level 1 (largest) to level 6 (smallest). Font tags () change the font size, face, and color.
There are several list tags. The unordered list (
Table tags (
column one, row one column two, row one column one, row two column two, row two
The tag that gave HTML its instant success is the anchor tag. The anchor tags () create a hyperlink to another HTML document or to another file, such as a sound, video, or graphic file. The basic syntax of a hypertext link is as follows:
The most important HTML elements for Web programming are the form () elements, which are elements that accept user inputs. Figure 1 displays a sample of a query prompting form that accepts several types of user inputs. The inputs are used to formulate the query request to the database; results are returned on another Web page.
The Query Options form in Figure 1 uses the following types of form elements:
Selection list. Two types of selection lists are shown in this figure. The first type is the multiple-item selection list (shown in the Fields to Include section), which is used to display more than one list element at a time. This list box also allows the selection of more than one list element. The other type of selection list is the drop-down list, which is shown in the other sections of the form. The drop-down list displays additional list items when the user clicks the downward-pointing arrow. The HTML syntax for a multiple-item and single-item list is shown in Figure 2, sections B and D.
Check box. As shown in Figure 1, check-box selections are used in the Fields to Include section and in the Optional Selections section. The Fields to Include check boxes function as group check boxes, since they are used to select items from a set. The Optional Selections check boxes are used as single-item selections because each check box (Show Date, Show Time) functions independently of the other. The HTML syntax for a group of check boxes and a single-item check box is shown in Figure 2, sections C and G.
Radio button. The Order by Selections section includes two radio-button selections used to select the sort order for the query. Radio buttons are used in sets of at least two to provide a mutually exclusive selection capability. For example, if you click the Ascending selection, the Descending selection is unselected. The HTML syntax for a group of radio buttons is shown in Figure 2, section F.
Submit button. The Submit Query button at the bottom of the form invokes the CGI program that will process the Query Options form (see Figure 2, section H). The name of the CGI program is usually indicated on thetag is usually located immediately before the closing tag.
Figure 2: Form elements, the most important HTML elements for Web programming, accept user inputs.