Website Composition Example - Demo

Consider the case of defining a dynamic area in your page. This page consists of a list of tab-like links and simple texts or images, called snippets. Using HTML and other web technologies does not explain the semantics behind this area adequately, and it is hard to extend. We developed a small configuration language, called HTCL, to define such simple snippets.

The following code is everything that is needed to define a snippet. The expression gives the snippet a name, here overview, and then uses the plainpicture template. In the template, we specify the file, the title, and the alignment of the picture. This is all we need:

overview = plainpicture({ 
  file: "images/test/intro.jpg",
  text: "HTCL processes template html pages, combines them, and [...]",
  align: 'left'
})

Likewise, we use such expressions to define snippets for architecture and a contact. Finally we put all snippets together in the following mainpage construct. As can be seen, this construct defines two areas on a page: (i) a menu appearing on the top, and a content area that displays the snippets.

start = mainpage({
  content: {url: home, named: "content"},
  menu:[  
    { title: "Overview", 
      onclick: open({url: overview, into: "content"}) }, 
    { title: "Architecture",
      onclick: open({url: architecture, into: "content"}) }, 
    { title: "Contact",
      onclick: open({url: contact, into: "content"}) }
  ]
})

Using HTCL

From the constructs as used above, the following web page will be rendered: