Basic Hitop.
2. Basic Templating
In it's very basic form, Hitop is a templating tool. You can create a template and re-use that template across as many pages as you so desire. In this section, we will use a very basic template - essentially a page with a heading, a title in the title bar, and some body text to pad the page out.
We will call this page template.hitop and the page template's HTML looks like this:
<html>
<head>
<title>
<@GET NAME="PAGETITLE">
</title>
</head>
<body>
<h1><MAINTITLE></h1>
<BODYTEXT>
</body>
</html> You should see three tags highlighted, these being <@GET
NAME="pagetitle">, <MAINTITLE> and
<BODYTEXT>. These three are pieces of hitop markup.
This markup will be replaced with our content. This content is defined in the source file, which I've called source.hitop. It looks like this:
<@SET NAME="pagetitle" VALUE="My First Template">
<@DEF NAME="maintitle">My First Template</@DEF>
<@DEF NAME="bodytext">Hello there and welcome to my first template.
Exciting, isn't it?</@DEF>
<@FILE SRC="template.hitop"> Okay, this page, once created, won't look much, but then my job here is not how to design webpages, nor is it how to come up with funky content. It's here to help you understand Hitop!
If you compare the source and the template you will see that the names we define in the source, also appear in the template. What is in the template will be replaced by what is in the source file.
Variables
The first line of our source file is <@SET NAME="pagetitle"
VALUE="My First Template">.
<@SET NAME=".."> sets a variable name. The variable can
be anything you want, as long as it is just text. You cannot include HTML
markup within a variable. Here, we are setting the page TITLE. I have called
the variable pagetitle although you could call it anything you like.
It makes sense to choose a name with some meaning though.
Once we have set a variable, we will want to call it again. This is done
with the <@GET NAME=".."> tag. In our template file, we use
<@GET NAME="pagetitle"> to call the variable. Hence our
page title will be set to 'My First Template'.
Procedures
Our source file also defines some procedures. At their most basic form, procedures could be thought of as variables that allow HTML markup (and indeed Hitop markup) to be included within them.
A procedure is defined by <@DEF NAME="procname"> where
procname is the name you wish to give your procedure. Once you have finished
defining your procedure, you must close the tag with a
</@DEF>.
In our source file we have defined two procedures. One called MAINTITLE is used for our header. The other, BODYTEXT is used to contain the main page text.
It should be noted that in this case, MAINTITLE could be a variable. I personally tend to use a procedure for page headers, mainly cos you never know when you might want to you graphics or some extra HTML in there.
A procedure is called in the template file by
<PROCNAME>. Note that while most Hitop markup is prefixed
with an @ symbol, it is not the case here. It should also be mentioned that
all Hitop markup is non-case sensitive.
So in our template file
<h1><MAINTITLE></h1> will get
replaced with <h1>My First Template</h1>.
Pretty straightforward eh?
File Inclusion
Our source file has one more line in it: <@FILE
SRC="template.hitop">. This line tells Hitop the name of the
template file we wish to use. In this case, we are using
template.hitop. In this example, all our files will be in the same
directory, although we will look at multi-level files later in this
tutorial.
What next?
Well, we have our source file, and we have our template file. However, both are completly useless if we don't merge them together...
You can download the example files for this page here.
This work is licensed under a Creative Commons License.
