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.
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:
Three observations can be made about this process:
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:
Our box can now be added to a page simply by calling the user-defined tag as follows:
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:
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:
Now we'll define a Tag that shows your Email address, at the same time providing a hot-link directly to your mail box:
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:
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:
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!Anything else you want to do with this
Web Page should be placed here.
Send your comments to firstname.lastname@example.org
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.
© 1996-2018 H.E.I. All Rights Reserved.