heitml: Web Page Templates

heitml takes the World Wide Web to a higher level!
	Introduction
	heitml Features

	Language Guide
	Web Page Templates
	Creating SQL Tables
	Creating FORMs
	Database Access
	Altering SQL Tables
	Updating SQL Tables
	A Sample Program
	User-defined Functions
	Control Statements
	dba Tutorial
	Session Mode

	Language Reference
	The heitml Libraries
	Supported Platforms
	User Guide
	Download
	User Registration
	Discussion Group
	Mailinglist

NEW! heitml 1.2 new features

Send us mail

Contact Info

heitml Language Guide
by Keith Oustalet

Designing Web Page Templates

heitml provides a high-level framework within which you can develop, enhance, and maintain Web Sites, along with the ever growing amount of data you want to publish on the World Wide Web.

We're going to demonstrate how this framework operates by providing you with concrete, real-life examples. First we'll define a Web Page "template" that can serve as a model upon which to build your Web Applications. This template will not only make it quicker and easier to get your Web Pages up and running, it will ensure that your Pages maintain a consistent "look and feel". Users will feel comfortable navigating your Site, without becoming disoriented or confused about where they are, or where they want to go.

Our first example will assume you have a corporate or product Logo you'd like to display at the top of each page, followed by a marketing slogan. Also, at the bottom of each page you want to let everyone know how they can send you Email.

We only need a few heitml specific Tags for this; namely, the <def>, <defenv>, and <include> Tags.

Defining your own Tags

First, let's define a Tag that will display your Logo whenever it's called:

<def ShowLogo>
   <IMG SRC="/DirectoryName/LogoName.gif">
</def>

As you can see, we've simply taken an HTML command that points to an image source and given it a name. From now on, any time you want to display "LogoName.gif" in a Web Page, all you have to do is place the pre-defined <ShowLogo> Tag in your code, and heitml will insert the necessary information into the HTML page before passing it on to your Web Browser.

Next, let's define another Tag to hold a slogan that you want associated with your company or product:

<def ShowSlogan>
  <P>
  <FONT COLOR="#8b0000>
  <B>h<I>ei</I>tml takes the World Wide Web 
  to a higher level!</B>
  </font>
  <P>
</def>

Now we'll define a Tag that shows your Emaill address, at the same time providing a hot-link directly to your mail box:

<def EmailAddress>
 <P>
 Send your comments to
 <A HREF=MAILTO:oustalet@h-e-i..de> 
    oustalet@h-e-i.de </A>
</def>

The <defenv> Tag ties everything together for us like this:

<defenv MyWebPageLayout> 
  <HTML>
    <BODY BGCOLOR="BEIGE"> 
      <ShowLogo>
      <ShowSlogan>
        <defbody> <P>
      <EmailAddress>
    </BODY>
  </HTML>
</defenv>

Finally, let's assume that we've placed all of the above code examples into a file called "mylayout.hei". From now on, anytime we start to design a new Web Page, all we need do is include "mylayout.hei" at the top. You then make a call to <MyWebPageLayout>, add any additonal statements necessary to complete that Web Page, and then let heitml know you've finished by issuing the End Tag </MyWebPageLayout>.

Here's what it should look like:

<include mylayout.hei>
 
<MyWebPageLayout>
 
Anything else you want to do with this Web Page 
should be placed here.
 
</MyWebPageLayout>

And here's what MyWebPageLayout looks like when interpreted by your Web Browser:

heitml takes the World Wide Web to a higher level!

Anything else you want to do with this Web Page
should be placed here.

Send your comments to oustalet@h-e-i.de

There are many things you can do to spruce up <YourOwnWebPageLayout>, but of course, we're just getting started.