Modular Pages 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 demonstrate how this framework operates by providing you with 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 find it easy to navigate your Site without becoming disoriented or confused.

Our first example will assume that you have a corporate or product Logo you'd like to display at the top of every Web page, followed by a marketing slogan. Also, the bottom of each page will 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

Text boxes provide a good example for us to start with. A text box enables you to render text such as titles or headings using the same layout. For example - here's the standard HTML coding you would normally use to produce the heading above this paragraph:

An HTML Text Box
<table border=4 bgcolor="#f5f5dc"> <tr><td>Defining your own Tags</td></tr> </table>

Three observations can be made about this process:

1. The rendered text (i.e. the appearance or layout) is the same for every box.
2. If you're not using a WYSIWYG tool, you have to type a lot of HTML tags every time you want to create a new box.
3. Even an HTML editor will not save you much work, since each box requires that you to edit a table, a row and a column.

The question which then arises is: Can anything be done to create these boxes more efficiently?

One obvious solution is to create a shortcut or use a component that can be dragged and dropped to any part of a Web page. Then the only thing needed is to type the actual text you want to display. In heitml you can define shortcuts through user-defined tags and components.

Here's what the user-defined tag for the text box looks like in heitml:

heitml Tag Definition: box
<defenv box> <table border=4 bgcolor="#f5f5dc"> <tr><td> <defbody> </td></tr> </table> </defenv>

Our box can now be added to a page simply by calling the user-defined tag as follows:

<box>Defining your own Tags</box>

The difference between a user-defined tag and a component is very simple. You just have to add a special clause in your tag definition which tells heitml to treat this tag as a component. Throughout this Language Guide, whenever you read the term user-defined tag you can also think of it as the primary building block for heitml components.

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

heitml Tag Definition: ShowLogo
<def ShowLogo> <IMG SRC="/DirectoryName/LogoName.jpg"> </def>

As you can see, we've simply taken an HTML Tag that points to an image source and given it a name. From now on, any time you want to display LogoName.jpg 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:

heitml Tag Definition: ShowSlogan
<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 Email address, at the same time providing a hot-link directly to your mail box:

heitml Tag Definition: EmailAddress
<def EmailAddress> <P> Send your comments to <A href="mailto:contact@radpage.com"> contact@radpage.com </A> </def>

We'll assume that you want these newly defined Tags to be a part of every page you design, so we'll use the defenv Tag to tie everything together. There are two basic differences between the def and defenv Tags. The first is that defenv defines a special class of Tags called Environment Tags (i.e. Tags that require an End Tag). The second difference is that any Tag defined by defenv must always contain a special purpose Tag called defbody within it. This Tag serves as a "place holder" for instructions that will be dynamically inserted at run time.

Here is an example:

heitml Environment Tag Definition: BODY
<defenv BODY @p ...> <\BODY > <ShowLogo/> <ShowSlogan/> <defbody> <P> <EmailAddress/> </P> <\/BODY> </defenv>

Notice that the above Tag definition refines the traditional HTML Environment Tag <BODY> that is a standard part of HTML Web Authoring. By using the @p ... syntax, the redefinition will accept every parameter of the original <BODY> tag definition.

Also notice that the <defenv BODY> Tag contains all three of our previously defined Tags. The <ShowLogo/> and <ShowSlogan/> Tags will appear at the top of the page, and the <EmailAddress/> Tag will appear at the bottom. Anything else that appears on the page will be inserted at run time in the place reserved by the <defbody> Tag.

In order to make it clear what's happening here, let's assume that we've placed all of the above Tag definitions into a file called mylayout.hei. From now on, anytime we design a new Web Page, all we need do is include mylayout.hei at the top of the page. You then add any additional statements necessary to complete that Web Page between the <BODY> and </BODY> Tags.

Here's what a sample heitml Web Page (we'll call it Sample.hei) should look like:

heitml Source Code File: Sample.hei
<HTML> <HEAD> <include name="mylayout.hei"/> <TITLE> Sample heitml Page </TITLE> </HEAD> <BODY> Anything else you want to do with this Web Page should be placed here. </BODY>

You may have noticed that the code for this Web page looks just like ordinary HTML, except for the <include> statement.

And here's what Sample.hei will look like in your Web Browser:

heitml takes the World Wide Web to a higher level!

Send your comments to contact@radpage.com

Summary

In this page we introduced some basic concepts of Tag design and showed you how these Tags could be assembled in a common layout file to create a reusable template.

We demonstrated how this layout file could be incorporated into your Web Page using the include Tag.