HTML is a language for specifying the structure and layout of web documents. We also say “HTML document” for a text written in the syntax of HTML. Basically, an HTML document consists of the following elements:
elementary text
tags with other HTML elements as contents, like headers (h1, h2,…), lists (ul, ol,…), etc.
tags without contents, like line breaks (br), images (img), etc.
The plain syntax of HTML, which is interpreted by a web browser when displaying HTML documents, requires tags be enclosed in pointed brackets (<>). The contents of a tag is written between an opening and a closing tag where the closing tag has the same name as the opening tag but is preceded by a slash. Tags can also contain attributes to attach specific information to tags. If present, attributes are written in the form “=” after the opening tag’s name and before its right bracket.
For instance, “i” and “b” are tags to specify that their contents should be set using an italic and bold font, respectively. Thus, the HTML text
would be displayed by a web browser as this:
This is the italic and the bold font.
Tags without contents have no closing tag. An example is the tag for including images in web documents, where the attribute “src” specifies the file containing the picture and “alt” specifies a text to be displayed as an alternative to the picture:
A program with a web interface must generate HTML documents that are displayed in the client’s browser. In principle, we can do this in Curry by printing the text of the HTML document directly, as in:
If the program becomes more complex and generates the HTML text by various functions, there is the risk that the generated HTML text is syntactically not correct. For instance, the tags with contents must be properly nested, i.e., the following text is not valid in HTML (although browser can display it but may become confused by illegal HTML documents):
To avoid such problems in applications programs, one can introduce an abstraction layer where HTML documents are modeled as terms of a specific datatype. Thus, a web application program generates such abstract HTML documents instead of the concrete HTML text. This has the advantage that ill-formed web documents correspond to ill-formed expressions in Curry which would immediately be rejected by the compiler. The actual printing of the concrete HTML text is done by a wrapper function that translates an abstract HTML document into a string.
For representing abstract HTML documents in Curry, we define the following datatype of basic HTML expressions:
The constructor BaseText corresponds to elementary text in an HTML document, whereas the constructor BaseStruct correspond to HTML elements with a tag and attributes. Thus, the parameter of type “Attrs”, which is a type synonym for “[(String,String)]”, is the list of attributes, i.e., name/value pairs.
For instance, our first HTML document above is represented with this datatype as the following list of HTML expressions:
Similarly, the image tag above is represented as follows:
Obviously, we can specify any HTML document in this form but this becomes very tedious for a programmer. To avoid this, we define several functions as useful abbreviations of common HTML tags:
Characters that have a special meaning in HTML, like “<”, “>”, “&”, “"”, should be quoted in elementary HTML texts to avoid ill-formed HTML documents. Thus, we define a function “htxt” for writing strings as elementary HTML texts where the special characters are quoted by the function “htmlQuote”:
Now we can represent our first HTML document above as follows:
All the definitions we have introduced so far are contained in the library “HTML.Base” of the Curry package html2. In order to use this library, one has to add it as a dependency by the CPM command (see Section 5.1)
and add the import declaration
in the header of the Curry program. The library HTML.Base also defines a wrapper function showBaseHtmls to generate the concrete textual representation of an abstract HTML expression. For instance, the value of
is the string
In order to generate a complete HTML page with header information, the library HTML.Base contains the following definition of HTML pages:
The first argument is the title of the page and the third argument is the contents of the page. The second argument is a list of optional parameters, like encoding scheme, style sheets etc. Since they are seldom used in standard pages, the library HTML.Base contains also the following function to specify HTML pages without optional parameters:
Furthermore, the library HTML.Base defines a wrapper function
to generate the concrete textual representation of a complete HTML page with head and body parts. For instance, the value of
is the string
We can use these functions to write Curry programs that generate HTML documents. For instance, consider the generation of an HTML document that contains a list of all multiplications of digits, i.e., a line in this document should look as follows:
The product of 7 and 6 is 42
First, we define a list of all triples containing such multiplications by the use of list comprehensions (compare Section 4.2.4):
Each triple is translated into a list of HTML expressions specifying the layout of a line:
Now can use these definitions to define the complete HTML document (the prelude function concatMap applies a function that maps elements to lists to each element of a list and concatenates the result into a single list) [Browse Program][Download Program]:
For instance, we can use the latter function to store the HTML page in a file named “multtable.html” by evaluating the expression:
Define a function boldItalic to translate text files into HTML documents. The function has two arguments: the name of the input text file and the name of the file where the HTML page should be stored. The HTML document should have the same line structure as the input but the lines should be formatted in bold and italic, i.e, first line in bold, second in italic, third in bold, fourth in italic, etc. Hint: use the prelude function lines to split a string into a list of lines. [Browse Answer][Download Answer]