This defines an example Html page.

import Html

We define our page as:

htmlPage :: [Html]
htmlPage
      = header
        << thetitle
           << "My Haskell Home Page"
   +++ body ! [bgcolor "#aaff88"] << theBody

The definition of htmlPage reads: First we have a header, which contains a title, which contain the text "My Haskell Home Page". After this, we have a body, with attribute bgcolor set to #aaff88, and this body contains the Html defined by theBody. Don't worry about the type of things right now, just try get a feel for what the combinators look like.

theBody :: [Html]
theBody =
      table ! [border 0] << tableContents
  +++ br
  +++ p << message
message
= "Haskell is a general purpose, purely functional programming language."

This reads: the body is a table (with a border), the contents of the table are defined by tableContents. This is followed by a br (an explicit line break), and a paragraph containing a message.

Now need to define the tableContents. For this we use our special table combinators.

tableContents :: HtmlTable
tableContents = (haskell `above` purely) `beside` lambda
    where
      haskell = td ! [align "center"]
                  << font ![size "7",face "Arial Black"]
                      << "Haskell"
      purely  = td << font ! [size "6"]
                      << "A Purely Functional Language"
      lambda  = td << image ! [src "lambda.gif"]

This produces a table of cells, which nest like this:

haskell	lambda
purely

Even though the lambda box sits over two rows, the semantics of above and beside handle this correctly.

Now we can render our HTML page.

main = writeFile "example.htm" (renderHtml htmlPage)