THTML5 Tutorial

THTML5 is an object designed to help you create and maintain HTML documents.

The purpose of THTML5 is to progressively build an HTML page, using various methods. THTML5 maintains the generated HTML code in what is called an HTML buffer. Most of the THTML5 methods add code to the HTML buffer.

It also contains a ConvertExcel method to convert an Excel document into an HTML document.

Create an instance of THTML5

'html'Œwi'*Create' 'THTML5'('debug'1)
html

The debug property is used to display an APL window with Internet Explorer always rendering your HTML buffer as it is so far.

The first thing to do is to always use the Start method:

'html'Œwi'Start' 'My Home Page'

<HTML>
<HEAD>
<TITLE>My Home Page</TITLE>
</HEAD>
<BODY text="#004040" bgcolor="#FFFFFF">

The Start method is one of the methods which returns the current content of the HTML buffer.

Defining Styles

You generally use THTML5 by first defining various styles using the AddStyle method, for example:

      'html'Œwi'AddStyle' 'BODY {background: url(//Dell8200/C/APLWin/Objects/apl2000a.gif) no-repeat center center}'
      'html'Œwi'AddStyle' 'P {color: darkslategray; font-family: Helvetica, Arial, sans-serif; font-size: 9pt; margin: 20px, 100px, 20px, 100px;}'
      'html'Œwi'AddStyle' 'H1 {background-color: cyan; color: purple; text-align: center; font-size: 20pt;}'
      'html'Œwi'AddStyle' 'H1.warning {color: darkorchid; font-size: 16pt; border-top: ridge 2px blue; border-bottom: ridge 2px blue;}'
      'html'Œwi'AddStyle' '.small {color: gray; font-family: Arial; font-size: 8pt; font-weight: 100;}'
      'html'Œwi'AddStyle' 'PRE {font-family: APL2000; font-size: 12; color: blue;}'
      'html'Œwi'AddStyle' '.aplfont {font-family: APL2000; font-size: 12;}'

The Add method is used to add text to the HTML buffer using various HTML tags and styles:

'html'Œwi'Add' 'H1' 'My Home Page'

This result in the following window poping up in the upper right corner of the screen:

THTML5_1.gif

At any time you may want to remove a style. This is done using the RemoveStyle method:

'html'Œwi'RemoveStyle' 'BODY'

and you may review all the styles defined in the page with the read-only styles property:

'html'Œwi'styles'
.aplfont {font-family: APL2000; font-size: 12;}
.small {color: gray; font-family: Arial; font-size: 8pt; font-weight: 100;}
H1 {background-color: cyan; color: purple; text-align: center; font-size: 20pt;}
H1.warning {color: darkorchid; font-size: 16pt; border-top: ridge 2px blue; border-bottom: ridge 2px blue;}
P {color: darkslategray; font-family: Helvetica, Arial, sans-serif; font-size: 9pt; margin: 20px, 60px, 20px, 60px;}
PRE {font-family: APL2000; font-size: 12; color: blue;}

To use a given style, you may specify it as the second argument to the Add method:

'html'Œwi'Add' 'H1.warning' 'An APL Web Site!'

Checking the HTML buffer

At any time you may review the HTML code produced so far, by invoking the html property:

'html'Œwi'html'

<HTML>
<HEAD>
<TITLE>My Home Page</TITLE>
<STYLE type="text/css">
   .aplfont {font-family: APL2000; font-size: 12;}
   .small {color: gray; font-family: Arial; font-size: 8pt; font-weight: 100;}
   BODY {background: url(//Dell8200/C/APLWin/Objects/apl2000a.gif) no-repeat center center}
   H1 {background-color: cyan; color: purple; text-align: center; font-size: 20pt;}
   H1.warning {color: darkorchid; font-size: 16pt; border-top: ridge 2px blue; border-bottom: ridge 2px blue;}
   P {color: darkslategray; font-family: Helvetica, Arial, sans-serif; font-size: 9pt; margin: 20px, 60px, 20px, 60px;}
   PRE {font-family: APL2000; font-size: 12; color: blue;}
</STYLE>
</HEAD>
<BODY text="#004040" bgcolor="#FFFFFF">
<H1>My Home Page</H1>

The ShowCode method is a little similar to the html property except that it completes the HTML buffer with the final necessary closing tags:

'html'Œwi'ShowCode'

<HTML>
<HEAD>
<TITLE>My Home Page</TITLE>
<STYLE type="text/css">
   .aplfont {font-family: APL2000; font-size: 12;}
   .small {color: gray; font-family: Arial; font-size: 8pt; font-weight: 100;}
   BODY {background: url(//Dell8200/C/APLWin/Objects/apl2000a.gif) no-repeat center center}
   H1 {background-color: cyan; color: purple; text-align: center; font-size: 20pt;}
   H1.warning {color: darkorchid; font-size: 16pt; border-top: ridge 2px blue; border-bottom: ridge 2px blue;}
   P {color: darkslategray; font-family: Helvetica, Arial, sans-serif; font-size: 9pt; margin: 20px, 60px, 20px, 60px;}
   PRE {font-family: APL2000; font-size: 12; color: blue;}
</STYLE>
</HEAD>
<BODY text="#004040" bgcolor="#FFFFFF">
<H1>My Home Page</H1>
</BODY>
</HTML>

Adding Text Content to the Page

To add content to the page, use the Add method. This method accepts 2 or more arguments.

Its second argument is either an HTML tag name, or one of the existing styles defined in the page. If you have defined class styles, like: .aplfont independant of any selector, you may use it with any HTML tag as follows: DIV.aplfont

The remaning arguments are one or more character vectors representing the content to be added to the page.

For example, the Add method can be used to add paragraphs of text as follows:

      par1„'This is the 1st paragraph of text in my Web Site.<br>',Œtcnl
      par1„par1,'It may contain any HTML tag.',Œtcnl
      par1„par1,'Use the <br> tag to organize new lines in your paragraph!',Œtcnl
      par1„par1,"Œtcnl's are used to include new lines in the HTML code but not in the HTML output!"

      par2„'This is the 2nd paragaph. Because the <p> tag was defined with a style',Œtcnl
      par2„par2,'including margins, this style is automatically used when rendering the paragraphs.'

      'html'Œwi'Add' 'P' par1 par2

resutling in:

THTML5_2.gif

Clearing the Page

At any time you may call the Clear method to remove any content from the page. Note that only content within the <BODY> tag is removed.

Example:

'html'Œwi'Clear'

Adding Tables

It is very easy to add any table to the HTML page, by invoking the AddTable method.

Simply create any APL nested matrix of any depth and pass to the AddTable method as its second argument.

The AddTable method 1st argument is a character string of parameters for the <TABLE> tag.

Example:

aaa„10 10½¼100000

bbb„5 5½1000×¼100

bbb[2;3]„ 3 3½'APL*PLUS PC' 'STSC'1982 'APL*PLUS II' 'STSC'1986 'APL+Win' 'APL2000'1997

aaa[3;4]„ bbb

'html'Œwi'AddTable' ' border="1" cellpadding="0" cellspacing="0"' aaa

This results in the following HTML table being created:

THTML5_3.gif

Converting an Excel document to HTML

THTML5 provides a method for converting Excel .XLS documents to HTML: ConvertExcel

Although Microsoft Excel also provides the same functionnality from its SaveAs menu, the HTML conversion performed by Excel has a number of flaws, one of them being that merged cells are not properly converted.

To convert an Excel document, you must use the ConvertExcel method and pass to it:

l the Excel document file name

l the sheet numbers of the sheets to convert to HTML

Each specified sheet is converted to an .HTML document saved in the your Excel document HTML subdirectory. If such a directory does not exist, the ConvertExcel method creates it. The saved .HTML documents take the name of the Excel sheets to which they correspond.

Example:

Assume you have an Excel document named H:\Aplwin\OBJECTS6\Excel\Essai Tableau1.xls with 2 sheets named Tableau1 and Tableau2 which looks like this:

THTML5_4.gif

Let's convert both sheets to HTML documents with:

'html'Œwi'*Create' 'THTML5'('debug'1)

'html'Œwi'ConvertExcel' 'H:\Aplwin\OBJECTS6\Excel\Essai Tableau1.xls' (1 2)

This creates 2 HTML files named Tableau1.htm and Tableau2.htm (look at the sheet names in the Excel document above) which are saved in the H:\Aplwin\OBJECTS6\Excel\Html directory. Since this directory did not yet exist, it is created first.

If you double click on one of these HTML files, here is how it gets displayed in the browser (note: using Internet Explorer is highly recommended).

THTML5_5.gif Excel document converted to HTML with the THTML5 ConvertExcel method

Note that the ConvertExcel method seems to do a better HTML conversion job than the Excel Save As Web Page feature does. Here is what you would get by saving your document as an HTML page from within Excel:

THTML5_6.gif Excel document converted to HTML by Excel Save As Web Page menu

As this picture shows, there are several problems with the Excel conversion to HTML:

l titles and cells in general are vertically bottom aligned

l Excel does not convert cells with the Center Across other cells horizontal alignment correctly

l Excel displays vertical cell borders where it sometimes should not

l Excel does not display the grid within the table

NOTE

Converting an Excel sheet to an HTML document with the ConvertExcel method may take a long time: typically it would take more than 60 seconds on an average computer for an Excel document containing about 1000 filled cells.