Aestiva H2O Web Site

Installation:
  Free Downloads
  The H2O Family
  Install Notes

Programming:
  Prerequisites
  H2O Whitepaper
  Online Manual
  Code Examples
  H2O Free Support

What's H2O?
H2O is programming made for the web.

What's it like?
H2O is English-like. If you know some Perl, VB, ASP, or PhP you'll be immediately productive in H2O. It runs on Linux, Mac, Unix, and Windows.

How do I try it?
Download H2O for free. Get it from hosting providers. Or buy on-line.

Where does H2O come from?
The language was invented by Aestiva. H2O stands for:
   HTML with
   HTML/OS
   Overlays.

Chapter 3:
Your First Program
Hello World is typically the first program students learn in computer science classes. Students learn how to write a program that displays the words Hello World on the screen.

In keeping with tradition you write a program that prints the words Hello World on the screen. However, you'll do more. After all, anyone with knowledge of HTML can display Hello World, because you can do that by simply typing the words into an HTML document.

Instead, you'll write a program that displays Hello World in different colors depending on the color a user selects.

If a user selects Red, Hello World displays in red; if the user selects Blue, it displays in blue; if the user selects Green, it displays in green.

Developing programs with H2O is top down. In other words, first you design your Web pages, then you add the programming. Using the Web editor in the H2O File Manager enter the following code into a Web page:


 <html>
 <font color=[Location1]>Hello World</font>
 <form action=[Location2]>

 <input type=radio name=color value=red>Red<br>
 <input type=radio name=color value=green>Green<br>
 <input type=radio name=color value=blue>Blue<br>
 <input type=submit name=mybutton value="Go">

 </form>
 </html>

This page displays the words Hello World on the screen and includes a set of three radio buttons the user can use to select a color. In this code example, [Location1] and [Location2] appear where you need to insert the dynamic content. [Location1] is positioned where the contents of a variable containing a color value is needed. [Location2] is where you should link your HTML form.

When the user clicks the Submit button, you want the color selected to appear at [Location1]. That way, when the page is redisplayed, the words Hello World appear in the color selected.

To complete your task you need to know a few things about H2O programming. First, when using H2O, dynamic content is added to documents by placing Overlays in them. An Overlay is one or more programming instructions surrounded with << and >> characters. For example, the Overlay:

prints the contents of the variable color in the page. The Overlay can also be written as <<color>>.

The second thing to learn about H2O is that HTML forms can be linked to Web pages by setting the ACTION parameter in the HTML form. When users submit their form, the selections they made are automatically saved to the variable names specified in the HTML form. The user is directed to the page specified by the ACTION parameter.

The page can be written explicitly or you can use an Overlay to dynamically set it.

In this program, you wish to redisplay the page after the user clicks the Submit button. To accomplish this, set ACTION to <<PAGE>>, which is a tag in H2O that contains the name of the current Web page. Alternatively, you can set ACTION explicitly to the current page.

For example, if your HTML document is called mypage.html then you can write ACTION=mypage.html in the header of your HTML form.

You are now ready to complete your first program. Edit the page so it looks as follows:


 <html>
 <font color=<<color>>>Hello World</font>
 <form action=<<PAGE>>>
 <input type=radio name=color value=red>Red<br>

 <input type=radio name=color value=green>Green<br>
 <input type=radio name=color value=blue>Blue<br>
 <input type=submit name=mybutton value="Go">
 </form>
 </html>

This revised page has Overlays where [Location1] and [Location2] once stood. [Location1] has been replaced with an Overlay that displays the value of the variable color. [Location2] has been replaced with an Overlay that displays the value of the current page. PAGE is a tag that contains the value of the current page. Click the Save/View button in your Web-editor to run your program.

Select different colors and click the Go button. The page will redisplay with the words Hello World in the color you select.

Understanding how this works
It is important to understand the steps that occur in the split second you run your program. Unlike computer programs that aren't Web-based, programs running on the Web are distributed between the Web server and a browser. The H2O tags run on the Web server. The HTML tags run on the browser.

When a user clicks a link on a Web page, a request is transmitted from the browser to the Web server for a specific Web page. The page is then scanned by the H2O engine on the Web server.

H2O reads the document from top to bottom. As it encounters Overlays, it runs them and uses them to build an HTML-only document. That's the document that's transmitted to your browser.

The original document containing Overlays stays on the server. The browser reads the HTML-only document received from the Web server and displays it on the screen.

When a user clicks a button in an HTML form, a similar sequence of steps occurs:

The variable names and values placed by the user in the HTML form, along with a request for a Web page, is transmitted to the Web server. Notice that each radio button contains a variable name and a value. When an HTML form is submitted, a variable name and value pair are transmitted from the browser to the Web server (only the one selected, of course).
The H2O engine on the server takes those values and places them inside the variable names the user specified.
The H2O engine reads the Overlays placed in the document and uses them to build an HTML-only document. It then transmits the document back to your browser. The browser reads the HTML-only document and displays it on your screen.

As you can see, Web pages with HTML tags and Overlays, contain instructions for both the Web server and the browser. Web programs behave differently than programs on PCs.

They're double-pass, meaning first the server passes across the document and then the browser passes across the document. Computer programs not on the Web are single-pass.

The server-side tasks defined in Overlays are performed before client-side tasks. They are used to dynamically change the contents of HTML documents. By the time the HTML document is rendered by H2O and transmitted to the browser, the document contains only HTML tags. It no longer contains Overlays.

To witness this, run your Hello World page using the Save/View button in your Web-editor. Then view the source of your Web page with your browser. All the Overlays will be gone. In their place you will see the standard HTML.

URLs, for example the one you defined for the ACTION in
the header of your HTML form, will be replaced with encoded URLs that link back to the Web site. You will not see any Overlays, because H2O used them on the Web server to render the page. They are not transferred across to the browser.

It's a good thing H2O tags are not sent to the browser. Browsers are finicky. The way they interpret tags can vary from browser version to version. It's why it's best to stick to the most basic HTML tags. On the other hand, Overlays are interpreted the same way regardless of the kind of browser used. They can be used reliably.

As you develop H2O programs you will want to keep these important aspects of Web programming in the back of your mind.

Remember that web software is two-pass. H2O runs on the server. HTML runs on the browser. You can rely on the H2O. You cannot rely on the HTML unless you stick to the most popular HTML tags.