08
Fri, Nov
10 New Articles

In the HTML Driver's Seat

Web Languages
Typography
  • Smaller Small Medium Big Bigger
  • Default Helvetica Segoe Georgia Times

 

 

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 Microsoft’s 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 closing

tag. You indicate that one section of text is a paragraph by placing tags around it, as follows:

 

 

 

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.

 

 



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.

 

 

 



HTML Documents

 

 

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 ( ) are located in the head. The title actually appears at the top of the browser above the menu bar, not inside the browser window.

 

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:

 

HTML Tags

 

 

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 (

 

), which allow you to group and align content.

 

 

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 (

    ), or bulleted list, and the ordered list (

      ), or numbered list, are the most frequently used. In these lists, the actual list item is indicated with the

    1. tag as follows:
    2.  

       

       

       

       

    3. bulleted item one
    4. bulleted item two
    5. bulleted item three
    6.  

       

      Table tags (

      ) organize content into rows and columns. The table contains rows (), and rows contain columns or table data cells (). All of the content, including other HTML tags, is located inside thetags. The syntax for a table is as follows:

       

       

       

       

       

       

      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:

       

      click here

       

       

      Form Elements

       

       

      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.

       

      • Text input. A text-input field is used in the Include Selections section (the field with the numeric value 50.00 entered into it). Text fields can be single or multiple lines. Unlike AS/400 DDS display files, you cannot assign field-type characteristics to a text- input field. For example, you cannot limit the user to entering numeric characters using HTML alone. Field-level edits and data-type restrictions are commonly programmed using JavaScript. The HTML syntax for a text box is shown in Figure 2, section E.

       

      • 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 the

      tag in the HTML document (see Figure 2, section A).

       

       

       

      More About the Form Tag

       

       

      For a simple form like the Query Options form shown in Figure 1, you can use a simple tag, as shown in Figure 2, section A. The tag is usually placed immediately after thetag that opens the description of the main part of the form. The ending

      tag is usually located immediately before the closing tag.

       

       

      The

      The tag is used to indicate to the Web server that it is to process input from the form using the POST method, as opposed to the GET method. In CGI- programming terms, this means that the form input is sent to your program in a file named STDIN (standard input) rather than in environment variables. IBM HTTP Server for AS/400 provides ILE APIs that you can use to access the incoming data stream, using either STDIN or environment variables (QzhbCgiParse for POST, QtmhGetEnv for GET). Practically all forms that you create will use the POST method because there is no restriction on the amount of data that can be sent from the browser to the Web server when you use POST (GET is limited to 1,024 characters).

       

       

      The ACTION part of the tag identifies the path and program names that are invoked to process the form. In this case, the name of the program is FORMTEST and the path is MCTEST. The path name is processed using a MAP directive in the HTTP Server configuration file, which is paired with an EXEC directive that indicates CGI programs are allowed to be executed in certain libraries that you define.

       

      Map /MCTEST/* /QSYS.LIB/MCTEST.LIB/*.PGM
      Exec /QSYS.LIB/MCTEST.LIB/*.PGM

       

      The

      tag is activated when the user clicks the Submit Query button. The code for the Submit Query button is shown in Figure 2, section H. TYPE=“SUBMIT” is used to indicate to the browser that it should render a button and that, when the button is clicked, it should perform the action specified in the tag. The VALUE is used to describe the caption that is to be on the button.

       

       

       

      More About Form Elements

       

       

      At this point, I’d like to discuss the remaining form elements in more detail. There are two specific issues that you should be aware of when using form elements for Web-page design:

       

      • What are the user interface issues that pertain to a form element?
      • What input format is provided by the form element for the CGI program? The form elements are used almost exactly as elements in other GUI environments (Windows or Mac) or the enhanced DDS screen elements are used. Elements other than text fields are generally used to select one or more items or options from a list of selections.

       

       

      List Boxes

       

       

      List boxes are usually used when you have many possible selections but only limited space to display the selections. You can see several examples of list boxes on the sample form. There are two ways to display list boxes:

       

      • Display multiple items at a time. The list box in the Fields to Include section (Figure 1) shows three list selections at a time. You can scroll through the rest of the items in the list.

       

      • Display a single item at a time. The list boxes in the other sections show only one item at a time. You click the arrow to display a drop-down or pop-up list of additional items.

       

      In addition to the two display techniques, there are two types of list boxes:
      • Multiple selection. The list box in the Fields to Include section allows multiple, simultaneous selections. To choose more than one selection, you press and hold the Control (Ctrl) key or the Shift key when clicking additional items. Control selects additional individual items, while Shift selects all items between the first item selected and the next item that you click. Multiple-selection list boxes function in the same way as a group of check boxes.

       

      • Single selection. The other list boxes on the form allow only one element at a time to be selected. If you click another item in the list, the previous selection is unselected. Single-selection list boxes are used in the same manner as a set of radio buttons.

       

      When you use list boxes, there are two user-interface issues that you should be aware of:

       

      • It can be difficult for users to work with multiple-selection list boxes. You should consider placing explanatory text near the list box to indicate how to make multiple selections.

       

      • List boxes generally should not contain so many elements that the list requires extensive scrolling. For example, a list of the 50 states is about the maximum number of elements that you would want to work with in a list box. If you have several hundred items to select from, you should consider providing an alternate selection method, such as another Web page that scrolls, or provide some method to select only a subset of the list.

       

      Input is returned to your CGI program or Java servlet in a name/value pair. A name is assigned to the list box (such as INCLUDE_FIELDS, shown in Figure 1 and Figure 2, section B). For a multiple-item list, the value is a comma-delimited list of selected values. For example, if the Part number and Quantity items are selected, as shown in Figure 1, the value returned to your program is PARTNO, PARTQTY.

       

      Although it may be difficult to parse the field names from the list in an RPG program, the format of data returned to your program is ideal if you are dynamically constructing an SQL statement. For example, you can use that list in the SELECT clause to indicate which database columns are to be selected from a table.

       

       

      Check Boxes

       

       

      Check boxes can be used in sets or individually. In Figure 2, section C, I show how to code a group by assigning the same name to each check box. In Figure 2, section G, the single-item check box shows how to assign a unique check box.

       

      Although there is no requirement that group check boxes appear in proximity to each other on a form, it is conventional to place the group together. For example, the Fields to Include section of Figure 1 shows how to use a group of check boxes to select database fields to include in a query. (Note that the form shows both a multiple-selection list box and check boxes to accomplish the same selection. On your forms, you would use only one of the techniques.)

       

      As with list boxes, input is returned to your program in name/value pairs. For a group of check boxes, the value list is comma delimited when multiple items are checked. For a single check box, the value is either the value assigned to the check box or blank.

       

      Check boxes are relatively easy for users to work with and are a good choice when you have enough space to put them on the form and the selections are known in advance. If you are populating selections from a database file, a list box is usually a better option since it is difficult to predict how many elements will be in the list.

       

       

      Text Input

       

       

      Text input fields accept character data and are used as output fields when displaying a form. HTML neither imposes nor allows restrictions on what can be entered, other than the maximum number of characters.

       

      You should always specify the size of the text field and maximum number of characters that can be entered, as shown in Figure 2, section E. You will want to specify both values identically, although you can specify a maximum length greater than the size. You should use that technique only when you have limited space to display a text field because the text then scrolls as it is entered. That is usually somewhat annoying and makes it very difficult for users to review what they entered before submitting the form. Input from a text box is returned to your program as a name/value pair.

       

       

      Radio Buttons

       

       

      Radio buttons should be used in sets of at least two. As shown in Figure 2, section F, each radio button in a set has the same name. When one of the radio buttons is clicked, it becomes the current selection; any other button that was selected in the same group becomes unselected.

       

      I once saw a spectacular example of radio button abuse in which only one radio button was in the group. The button was “one-way.” You could select it, but never deselect it. A single-item check box should be used for this type of selection, not a radio-button set of one, because a check box can be deselected by simply clicking on it.

       

      Input from a radio-button set is returned as a name/value pair to your program. By definition, only the one selected value is returned.

       

       

      Web in the Fast Lane

       

       

      Now that you know some Web-page design elements and form elements to use, you can begin designing highly functional Web pages. Along with studying HTML, you should also study JavaScript because you will undoubtedly want to add some editing capabilities to your Web pages.

       

      Although there are many advances in store for HTML in the near future, you will be well served by understanding the basics I have presented in this article.

       




      Figure 1: The Query Options form accepts several types of user inputs.


      In_the_HTML_Drivers_Seat07-00.png 597x612

       

       

       

       

       


       

       


      type="checkbox"
      value="PARTNO">
      Part number

       

      type="checkbox"
      value="PARTDS">
      Description

       


       

       


      type="text"
      size="20"
      maxlength="20">

       


      type="radio"
      value="ASC"
      CHECKED>
      Ascending

       

      type="radio"
      value="DESC">
      Descending

       


      type="checkbox"
      value="YES">
      Show Date

       


       

       

       

      A

       

      B

       

      C

       

      D

       

      E

       

      F

       

      G

       

      H

       

      Figure 2: Form elements, the most important HTML elements for Web programming, accept user inputs.

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

      BLOG COMMENTS POWERED BY DISQUS

      LATEST COMMENTS

      Support MC Press Online

      $

      Book Reviews

      Resource Center

      • SB Profound WC 5536 Have you been wondering about Node.js? Our free Node.js Webinar Series takes you from total beginner to creating a fully-functional IBM i Node.js business application. You can find Part 1 here. In Part 2 of our free Node.js Webinar Series, Brian May teaches you the different tooling options available for writing code, debugging, and using Git for version control. Brian will briefly discuss the different tools available, and demonstrate his preferred setup for Node development on IBM i or any platform. Attend this webinar to learn:

      • SB Profound WP 5539More than ever, there is a demand for IT to deliver innovation. Your IBM i has been an essential part of your business operations for years. However, your organization may struggle to maintain the current system and implement new projects. The thousands of customers we've worked with and surveyed state that expectations regarding the digital footprint and vision of the company are not aligned with the current IT environment.

      • SB HelpSystems ROBOT Generic IBM announced the E1080 servers using the latest Power10 processor in September 2021. The most powerful processor from IBM to date, Power10 is designed to handle the demands of doing business in today’s high-tech atmosphere, including running cloud applications, supporting big data, and managing AI workloads. But what does Power10 mean for your data center? In this recorded webinar, IBMers Dan Sundt and Dylan Boday join IBM Power Champion Tom Huntington for a discussion on why Power10 technology is the right strategic investment if you run IBM i, AIX, or Linux. In this action-packed hour, Tom will share trends from the IBM i and AIX user communities while Dan and Dylan dive into the tech specs for key hardware, including:

      • Magic MarkTRY the one package that solves all your document design and printing challenges on all your platforms. Produce bar code labels, electronic forms, ad hoc reports, and RFID tags – without programming! MarkMagic is the only document design and print solution that combines report writing, WYSIWYG label and forms design, and conditional printing in one integrated product. Make sure your data survives when catastrophe hits. Request your trial now!  Request Now.

      • SB HelpSystems ROBOT GenericForms of ransomware has been around for over 30 years, and with more and more organizations suffering attacks each year, it continues to endure. What has made ransomware such a durable threat and what is the best way to combat it? In order to prevent ransomware, organizations must first understand how it works.

      • SB HelpSystems ROBOT GenericIT security is a top priority for businesses around the world, but most IBM i pros don’t know where to begin—and most cybersecurity experts don’t know IBM i. In this session, Robin Tatam explores the business impact of lax IBM i security, the top vulnerabilities putting IBM i at risk, and the steps you can take to protect your organization. If you’re looking to avoid unexpected downtime or corrupted data, you don’t want to miss this session.

      • SB HelpSystems ROBOT GenericCan you trust all of your users all of the time? A typical end user receives 16 malicious emails each month, but only 17 percent of these phishing campaigns are reported to IT. Once an attack is underway, most organizations won’t discover the breach until six months later. A staggering amount of damage can occur in that time. Despite these risks, 93 percent of organizations are leaving their IBM i systems vulnerable to cybercrime. In this on-demand webinar, IBM i security experts Robin Tatam and Sandi Moore will reveal:

      • FORTRA Disaster protection is vital to every business. Yet, it often consists of patched together procedures that are prone to error. From automatic backups to data encryption to media management, Robot automates the routine (yet often complex) tasks of iSeries backup and recovery, saving you time and money and making the process safer and more reliable. Automate your backups with the Robot Backup and Recovery Solution. Key features include:

      • FORTRAManaging messages on your IBM i can be more than a full-time job if you have to do it manually. Messages need a response and resources must be monitored—often over multiple systems and across platforms. How can you be sure you won’t miss important system events? Automate your message center with the Robot Message Management Solution. Key features include:

      • FORTRAThe thought of printing, distributing, and storing iSeries reports manually may reduce you to tears. Paper and labor costs associated with report generation can spiral out of control. Mountains of paper threaten to swamp your files. Robot automates report bursting, distribution, bundling, and archiving, and offers secure, selective online report viewing. Manage your reports with the Robot Report Management Solution. Key features include:

      • FORTRAFor over 30 years, Robot has been a leader in systems management for IBM i. With batch job creation and scheduling at its core, the Robot Job Scheduling Solution reduces the opportunity for human error and helps you maintain service levels, automating even the biggest, most complex runbooks. Manage your job schedule with the Robot Job Scheduling Solution. Key features include:

      • LANSA Business users want new applications now. Market and regulatory pressures require faster application updates and delivery into production. Your IBM i developers may be approaching retirement, and you see no sure way to fill their positions with experienced developers. In addition, you may be caught between maintaining your existing applications and the uncertainty of moving to something new.

      • LANSAWhen it comes to creating your business applications, there are hundreds of coding platforms and programming languages to choose from. These options range from very complex traditional programming languages to Low-Code platforms where sometimes no traditional coding experience is needed. Download our whitepaper, The Power of Writing Code in a Low-Code Solution, and:

      • LANSASupply Chain is becoming increasingly complex and unpredictable. From raw materials for manufacturing to food supply chains, the journey from source to production to delivery to consumers is marred with inefficiencies, manual processes, shortages, recalls, counterfeits, and scandals. In this webinar, we discuss how:

      • The MC Resource Centers bring you the widest selection of white papers, trial software, and on-demand webcasts for you to choose from. >> Review the list of White Papers, Trial Software or On-Demand Webcast at the MC Press Resource Center. >> Add the items to yru Cart and complet he checkout process and submit

      • Profound Logic Have you been wondering about Node.js? Our free Node.js Webinar Series takes you from total beginner to creating a fully-functional IBM i Node.js business application.

      • SB Profound WC 5536Join us for this hour-long webcast that will explore:

      • Fortra IT managers hoping to find new IBM i talent are discovering that the pool of experienced RPG programmers and operators or administrators with intimate knowledge of the operating system and the applications that run on it is small. This begs the question: How will you manage the platform that supports such a big part of your business? This guide offers strategies and software suggestions to help you plan IT staffing and resources and smooth the transition after your AS/400 talent retires. Read on to learn: