In the HTML Driver's Seat

Web Languages
  • 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:





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 (




) 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:





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


      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 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.





      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








      Part number












      Show Date





















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




































































































      Support MC Press Online



      • WEBCAST


      • White Paper: Node.js for Enterprise IBM i Modernization

        SB Profound WP 5539

        If your business is thinking about modernizing your legacy IBM i (also known as AS/400 or iSeries) applications, you will want to read this white paper first!

        Download this paper and learn how Node.js can ensure that you:
        - Modernize on-time and budget - no more lengthy, costly, disruptive app rewrites!
        - Retain your IBM i systems of record
        - Find and hire new development talent
        - Integrate new Node.js applications with your existing RPG, Java, .Net, and PHP apps
        - Extend your IBM i capabilties to include Watson API, Cloud, and Internet of Things

        Read Node.js for Enterprise IBM i Modernization Now!


      • Profound Logic Solution Guide

        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 companyare not aligned with the current IT environment.

        Get your copy of this important guide today!


      • 2022 IBM i Marketplace Survey Results

        Fortra2022 marks the eighth edition of the IBM i Marketplace Survey Results. Each year, Fortra captures data on how businesses use the IBM i platform and the IT and cybersecurity initiatives it supports.

        Over the years, this survey has become a true industry benchmark, revealing to readers the trends that are shaping and driving the market and providing insight into what the future may bring for this technology.

      • Brunswick bowls a perfect 300 with LANSA!

        FortraBrunswick is the leader in bowling products, services, and industry expertise for the development and renovation of new and existing bowling centers and mixed-use recreation facilities across the entertainment industry. However, the lifeblood of Brunswick’s capital equipment business was running on a 15-year-old software application written in Visual Basic 6 (VB6) with a SQL Server back-end. The application was at the end of its life and needed to be replaced.
        With the help of Visual LANSA, they found an easy-to-use, long-term platform that enabled their team to collaborate, innovate, and integrate with existing systems and databases within a single platform.
        Read the case study to learn how they achieved success and increased the speed of development by 30% with Visual LANSA.


      • Progressive Web Apps: Create a Universal Experience Across All Devices

        LANSAProgressive Web Apps allow you to reach anyone, anywhere, and on any device with a single unified codebase. This means that your applications—regardless of browser, device, or platform—instantly become more reliable and consistent. They are the present and future of application development, and more and more businesses are catching on.
        Download this whitepaper and learn:

        • How PWAs support fast application development and streamline DevOps
        • How to give your business a competitive edge using PWAs
        • What makes progressive web apps so versatile, both online and offline



      • The Power of Coding in a Low-Code Solution

        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:

        • Discover the benefits of Low-code's quick application creation
        • Understand the differences in model-based and language-based Low-Code platforms
        • Explore the strengths of LANSA's Low-Code Solution to Low-Code’s biggest drawbacks



      • Why Migrate When You Can Modernize?

        LANSABusiness 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.
        In this white paper, you’ll learn how to think of these issues as opportunities rather than problems. We’ll explore motivations to migrate or modernize, their risks and considerations you should be aware of before embarking on a (migration or modernization) project.
        Lastly, we’ll discuss how modernizing IBM i applications with optimized business workflows, integration with other technologies and new mobile and web user interfaces will enable IT – and the business – to experience time-added value and much more.


      • UPDATED: Developer Kit: Making a Business Case for Modernization and Beyond

        Profound Logic Software, Inc.Having trouble getting management approval for modernization projects? The problem may be you're not speaking enough "business" to them.

        This Developer Kit provides you study-backed data and a ready-to-use business case template to help get your very next development project approved!

      • What to Do When Your AS/400 Talent Retires

        FortraIT managers hoping to find new IBM i talent are discovering that the pool of experienced RPG programmers and operators or administrators is small.

        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:

        • Why IBM i skills depletion is a top concern
        • How leading organizations are coping
        • Where automation will make the biggest impact


      • Node.js on IBM i Webinar Series Pt. 2: Setting Up Your Development Tools

        Profound Logic Software, Inc.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. In Part 2, Brian May teaches you the different tooling options available for writing code, debugging, and using Git for version control. Attend this webinar to learn:

        • Different tools to develop Node.js applications on IBM i
        • Debugging Node.js
        • The basics of Git and tools to help those new to it
        • Using as a pre-built development environment



      • Expert Tips for IBM i Security: Beyond the Basics

        SB PowerTech WC GenericIn this session, IBM i security expert Robin Tatam provides a quick recap of IBM i security basics and guides you through some advanced cybersecurity techniques that can help you take data protection to the next level. Robin will cover:

        • Reducing the risk posed by special authorities
        • Establishing object-level security
        • Overseeing user actions and data access

        Don't miss this chance to take your knowledge of IBM i security beyond the basics.



      • 5 IBM i Security Quick Wins

        SB PowerTech WC GenericIn today’s threat landscape, upper management is laser-focused on cybersecurity. You need to make progress in securing your systems—and make it fast.
        There’s no shortage of actions you could take, but what tactics will actually deliver the results you need? And how can you find a security strategy that fits your budget and time constraints?
        Join top IBM i security expert Robin Tatam as he outlines the five fastest and most impactful changes you can make to strengthen IBM i security this year.
        Your system didn’t become unsecure overnight and you won’t be able to turn it around overnight either. But quick wins are possible with IBM i security, and Robin Tatam will show you how to achieve them.

      • Security Bulletin: Malware Infection Discovered on IBM i Server!

        SB PowerTech WC GenericMalicious programs can bring entire businesses to their knees—and IBM i shops are not immune. It’s critical to grasp the true impact malware can have on IBM i and the network that connects to it. Attend this webinar to gain a thorough understanding of the relationships between:

        • Viruses, native objects, and the integrated file system (IFS)
        • Power Systems and Windows-based viruses and malware
        • PC-based anti-virus scanning versus native IBM i scanning

        There are a number of ways you can minimize your exposure to viruses. IBM i security expert Sandi Moore explains the facts, including how to ensure you're fully protected and compliant with regulations such as PCI.



      • Encryption on IBM i Simplified

        SB PowerTech WC GenericDB2 Field Procedures (FieldProcs) were introduced in IBM i 7.1 and have greatly simplified encryption, often without requiring any application changes. Now you can quickly encrypt sensitive data on the IBM i including PII, PCI, PHI data in your physical files and tables.
        Watch this webinar to learn how you can quickly implement encryption on the IBM i. During the webinar, security expert Robin Tatam will show you how to:

        • Use Field Procedures to automate encryption and decryption
        • Restrict and mask field level access by user or group
        • Meet compliance requirements with effective key management and audit trails


      • Lessons Learned from IBM i Cyber Attacks

        SB PowerTech WC GenericDespite the many options IBM has provided to protect your systems and data, many organizations still struggle to apply appropriate security controls.
        In this webinar, you'll get insight into how the criminals accessed these systems, the fallout from these attacks, and how the incidents could have been avoided by following security best practices.

        • Learn which security gaps cyber criminals love most
        • Find out how other IBM i organizations have fallen victim
        • Get the details on policies and processes you can implement to protect your organization, even when staff works from home

        You will learn the steps you can take to avoid the mistakes made in these examples, as well as other inadequate and misconfigured settings that put businesses at risk.



      • The Power of Coding in a Low-Code Solution

        SB PowerTech WC GenericWhen 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:

        • Discover the benefits of Low-code's quick application creation
        • Understand the differences in model-based and language-based Low-Code platforms
        • Explore the strengths of LANSA's Low-Code Solution to Low-Code’s biggest drawbacks



      • Node Webinar Series Pt. 1: The World of Node.js on IBM i

        SB Profound WC GenericHave 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.
        Part 1 will teach you what Node.js is, why it's a great option for IBM i shops, and how to take advantage of the ecosystem surrounding Node.
        In addition to background information, our Director of Product Development Scott Klement will demonstrate applications that take advantage of the Node Package Manager (npm).
        Watch Now.

      • The Biggest Mistakes in IBM i Security

        SB Profound WC Generic The Biggest Mistakes in IBM i Security
        Here’s the harsh reality: cybersecurity pros have to get their jobs right every single day, while an attacker only has to succeed once to do incredible damage.
        Whether that’s thousands of exposed records, millions of dollars in fines and legal fees, or diminished share value, it’s easy to judge organizations that fall victim. IBM i enjoys an enviable reputation for security, but no system is impervious to mistakes.
        Join this webinar to learn about the biggest errors made when securing a Power Systems server.
        This knowledge is critical for ensuring integrity of your application data and preventing you from becoming the next Equifax. It’s also essential for complying with all formal regulations, including SOX, PCI, GDPR, and HIPAA
        Watch Now.

      • Comply in 5! Well, actually UNDER 5 minutes!!

        SB CYBRA PPL 5382

        TRY 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.

        Request your trial now!

      • Backup and Recovery on IBM i: Your Strategy for the Unexpected

        FortraRobot automates the routine 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:
        - Simplified backup procedures
        - Easy data encryption
        - Save media management
        - Guided restoration
        - Seamless product integration
        Make sure your data survives when catastrophe hits. Try the Robot Backup and Recovery Solution FREE for 30 days.

      • Manage IBM i Messages by Exception with Robot

        SB HelpSystems SC 5413Managing messages on your IBM i can be more than a full-time job if you have to do it manually. 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:
        - Automated message management
        - Tailored notifications and automatic escalation
        - System-wide control of your IBM i partitions
        - Two-way system notifications from your mobile device
        - Seamless product integration
        Try the Robot Message Management Solution FREE for 30 days.

      • Easiest Way to Save Money? Stop Printing IBM i Reports

        FortraRobot 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:

        - Automated report distribution
        - View online without delay
        - Browser interface to make notes
        - Custom retention capabilities
        - Seamless product integration
        Rerun another report? Never again. Try the Robot Report Management Solution FREE for 30 days.

      • Hassle-Free IBM i Operations around the Clock

        SB HelpSystems SC 5413For over 30 years, Robot has been a leader in systems management for IBM i.
        Manage your job schedule with the Robot Job Scheduling Solution. Key features include:
        - Automated batch, interactive, and cross-platform scheduling
        - Event-driven dependency processing
        - Centralized monitoring and reporting
        - Audit log and ready-to-use reports
        - Seamless product integration
        Scale your software, not your staff. Try the Robot Job Scheduling Solution FREE for 30 days.