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 1:
HTML In A Few Hours

A knowledge of HTML tags is a minimum requirement for anyone interested in building universal applications. After all, producing on-the-fly documents is about visualizing the end result -- documents containing HTML tags rendered by the browser. Even if you're an experienced programmer, you still need to "think" in HTML. Learning HTML, no matter how trivial it might seem, is necessary.

Luckily, almost anyone can get comfortable with HTML in a few hours. Most HTML tags don't work across different kinds of browsers, browser versions, and different hardware. Learning HTML is not about learning all the tags available. It's about learning the limited number of HTML tags that work reliably.

ABOUT THIS TUTORIAL
This tutorial breaks through the clutter. In just a few hours you'll know more about HTML than if you read a five hundred page book and took a month-long course. How is this possible? Because, books and courses don't differenciate between "practice" and "theory." Most HTML is unusable yet books and courses teach it to you anyway. Even worse, they leave it up to YOU to figure out what works and what does not.

In practice, being a good HTML programmer is about sticking to the basic tags, some CSS, and a bit of Javascript. After that, you enter the black hole of unreliability where work, study, and cleverness is not worth it. In this tutorial we stick to the basics. You gain an immediate knowledge of "practical HTML."

Good luck!

To learn HTML, take the tags listed here and play with them in an HTML document on your copy of H2O. Spend a few hours testing these tags. Test all the tags until you feel comfortable with them. After you're done you'll have enough knowledge of HTML to learn H2O. The HTML tags discussed here fall into the following four categories, which are discussed in the sections that
follow:

Text tags
Page attributes
HTML tables
Links and images

After learning these tags, you will also want to learn how to place input boxes and other input elements on the page, which involves another set of HTML tags. They are described in next chapter, HTML Forms Processing.

In this chapter you start by looking at how HTML tags are written. Then you look at the most common tags used, presented in the four categories we've just noted. Note that the tags and attributes presented in this chapter are not intended to be complete but serve as a quick introduction to HTML. For example, HTML style tags (CSS) and tags are not listed here.

Writing HTML Tags - The Fundamentals
By convention all HTML tags begin with a < character and end with a > character. The tags are sequences of text placed in HTML documents, which are themselves text documents. The first word in every HTML tag is the name of the tag. The name of the tag is then followed with one or more name-value pairs. Most tags have a corresponding end tag. These ending tags always begin with </ characters followed by the name of the tag and the > character. The end tags never contain name-value pairs. As an example, consider the following HTML:

This prints the words Hello World on the page. The tag preceding these words is called FONT. It has three name-value pairs. The names in these name-value pairs are called attributes and are predefined for the tag. In this FONT tag the first attribute is size. It is set to 3. The second attribute is color. The last attribute sets the typeface of the text. The ending tag to the FONT tag is the </font> tag. The pair of tags affects only the text
between them.

As a rule, all HTML tags are built this way. To fully understand how a tag is written you need to know the name of the tag and the possible name-value pairs it may contain. The order of the name-value pairs in the tag is unimportant. A tag's name and its attributes can be written in either upper or lower case. HTML is not case-sensitive.

Text Tags

Text tags are the easiest tags in HTML. You use them to change how your text looks on the page. The most important ones to know are discussed in the sections that follow.

<b>...</b>
Place text between <b> and </b> tags and your text will appear bold when the browser displays it. Browsers also allow you to use the tags <i> and </i> to make your text italic, and <u> and </u> to underline your text. These tags always appear in pairs.

bold

<font size=value color=value face=value>...</font>
Text that you place between these tags resizes to a specified size and the color of the text changes to the specified color. Browsers accept sizes that start at 1 (very small). The default size is 3. A very large font would be 6. The color you specify can be certain, predefined English word such as red, or a set of three two-digit hexadecimal numbers from 00 to FF representing the amount of red, blue, or green in the color. White is #FFFFFF and black is #000000. The font tag can also contain a typeface. Popular typefaces are arial and courier. The default font (if not specified) is Times Roman. These tags always appear in pairs.

<center>...</center>
Place text between these tags to center the line they are on. Funny thing though, there are no .. tags in HTML. Who knows why. to do that you can use the <DIV ALIGN=RIGHT> tag or use right justification using HTML tables. See the "HTML Tables" section, later in this chapter. These tags appear in pairs.

<br>
Place this tag at the end of lines or paragraphs to force a line-break. Everything after the tag appears on lines below the tag. This tag is needed since browsers ignore end-of-line characters in raw HTML text, because end-of-line characters are different on the Macintosh, Unix, and Windows systems. Since browsers work with all kinds of text files from all kinds of computers, they treat conventional end-of-line characters (and sequences of these characters or spaces) as if they were a single space. If you need a line break you must supply this tag. This tag does not need an ending tag.

Page Attributes
Page attributes are HTML tags that tell the browser how to build the page. For
example, you can tell the browser what background color to use for the page, what to write in the title bar across the top of a browser, and so on. The most common page attribute tags follow.

<html>...</html>
Put all of your text and HTML tags between these two tags. In other words, place the <htmlgt; at the top of the document and </html> at the end of the document. Note that H2O programming can appear above and below these tags. The <html> and </html> tags surround the display portion of the page.

<title>...</title>
Follow the <html> tag with a line of text between these two tags. This is the text you want to appear in the title bar of a visitor's browser. If you do not define a title for your document, browsers will either leave the title line blank or use your document name as the title.

<body bgcolor=value> or <body background=value>
Follow the <title>...</title> line with one of these two tags if you want a background color or image for the page. When specifying a background image use a URL or a file name for the image. Only .gif or .jpg image types are supported universally on the Web. This tag does not need an ending tag.

HTML Tables
HTML enables users to organize information on the screen in grids with rows and columns -- in other words, tables. To accomplish this, you need three kinds of tags: you use a <table> tag to surround the entire grid, a <tr> tag to surround each row of a table, and a <td> tag to surround a cell containing data in the table. <table> tags surround <tr> tags, which surround <td> tags, which surround text and images and content on the page. The following sections discuss each of these tags in more detail.

<table border=value bgcolor=value>..</table>
The <table> and </table> tags are the start and ending tags for a whole table. The border attribute in the tag sets the width of the border around the grid. Note that this pair of tags must surround one or more table row and end table row tags, as described in the next section. These tags appear in pairs.

<tr bgcolor=value<..</tr>

The <tr> and </tr> tags are the starting and ending tags for rows in a table. The bgcolor attribute sets the background color for all of the cells in the row. It overrides any bgcolor setting specified in the table tag. That is, a row's bgcolor attribute defines the color for the current row, while the table's bgcolor attribute define the color for remaining rows. Note that this pair of tags must surround one or more table cell tags, as described in the next section. These tags appear in pairs.

<td align=value valign=value color=value>..</td>
The <td> and </td> tags are the starting and ending tags for a cell in a row in a table. The bgcolor attribute sets the background of the cell. It overrides any bgcolor setting specified in the table row or table tags. These tags appear in pairs.
Again, I think it would be clearer if all examples include all name-value pairs that you discuss.


<table border=1>
<tr><td>Cell 1</td><td>Cell 2</td></tr>
<tr><td>Cell 3</td><td>Cell 4</td></tr>

</table>

Links and Images
Perhaps the most important aspect of HTML documents is its ability to
contain hypertext links and images. After all, the acrtonym HTML stands
for HyperText Markup Language. Here you learn how to write links and
embedd images in documents.

<img border=value src=value>
The IMG tag is used to display images inside a document. The image is the name of the image to be displayed. The border sets up a border around the image. Setting it to 0 removes any border. This tag does not need an ending tag.

<a href=value>..</a>
The href tag is called a hypertext link. When you place it and its closing tag around text, a browser makes it a link to the specified file. By default the HREF value displays as blue, underlined text. HTML also allows you to place images between these tags. Click the text or image between the tags and the browser requests the document specified. In H2O the link can be the name of an HTML document, a URL to a page somewhere else on the Web, or a link to an on-click Overlay at the bottom of the same Web page.

Stepping it up a notch
If you need to "step it up a notch" you will want to learn how to add CSS "style" tags to your HTML. They give you greater control over your fonts, colors, type faces, and border attributes. They can be inserted into any HTML tag using a name-value pair where the name is the word STYLE and the value is itself a set of name-value pairs. For example, to
assign a color and specific font size to text in an HTML table cell you could write:

Note how the name-value pairs are written differently than standard HTML. This does make CSS a bit unfriendly in the beginning, but it is useful. CSS also has advantage that it can be called as classes. For example, if you write:

at the top of the document you have defined two sets of CSS tags you can use in your web page. The TD tag above could be rewritten as:

The ability to set up styles at the top of a document for use throughout the web page is used throughout the web. With H2O you can go further still, by saving the CSS style to a variable and using it across all of your documents. This is something you will want to do.

In the mean time, now that you have an idea of how HTML is written, your next step is to learn how HTML form tags are written. Once you know that, you'll have a good foundation in HTML basics.