CS 1102
Hints for Using HTML in Racket

This is a brief set of hints to give you the minimum that you need to know about HTML to do Lab 6 and Homework 7. If you want to know more about HTML, there are many free tutorials available on the web, such as at W3 Schools

Basic HTML Syntax

HTML (which stands for Hyper Text Markup Langage) is one in a large family of languages that use XML syntax. The key syntactic element in XML/HTML is a tag, which is a keyword surrounded by open and close angle brackets, such as <html>. HTML tags normally come in matching pairs, such as <html> and </html> (note the slash indicates the closing tag of the pair). The material between two such tags is called an element. Whitespace is generally ignored, except inside indentifiers and quotes.

An HTML file is structured hierarchically as a nested set of elements. For example, the following is an HTML file that will display "Hello world!" in bold (with "Hello" in the title bar), when viewed in a browser: 

    <html>
      <head>
        <title>Hello</title>
      </head>
      <body>
        <b>Hello world!</b> 
      </body>
    </html>

Elements may also optionally have one or more attributes, which are are specified using a keyword syntax in the opening tag, such as: 

    <form action="http://localhost:8088/hello">
In this example, the form element has one attribute, named action, whose value is the quoted string (which happens in this case to be a URL).

Basic HTML Tags

Using HTML in Racket

You could construct an HTML page in Racket by doing a lot of string manipulation, but that would be very painful! Instead Racket provides an xml package which makes constructing HTML convenient. This package is used in the simple http server that supports Lab 6 and Homework 7. The basic idea of this package is to use symbols and nested lists instead of tags to construct the desired logical structure of the HTML page, and then only to convert the final nested structure to a string at the very end.

So for example, to wrap the bold tag around the string "Hello world!", instead of writing: 

    (string-append "<b>" "Hello world!" "</b>")
you can simply write: 
    (list 'b "Hello world!")
Similarly, instead of creating the string: 
    "<html> <body> ... </body> </html>"
you can construct the list: 
    (list 'html (list 'body ...))
These list forms are called x-expressions. You can see many more examples of using x-expressions in the simple http server code.

Attributes can also be optionally provided in x-expressions. If an element has attributes, these are specified as a initial sublist of attribute/value lists. For example, the following form element (from Hello.html) 

    <form action="http://localhost:8088/hello">
       What is your first name?
       <input type="text" name="firstName"/>
       <input type="submit" value="Click Here"/>
    </form>
would be constructed as follows: 
    (list 'form (list (list 'action "http://localhost:8088/hello"))
          "What is your first name?"
          (list 'input (list (list 'type "text") (list 'name "firstName")))
          (list 'input (list (list 'type "submit") (list 'value "Click Here"))))
yielding the following x-expression: 
    (form ((action "http://localhost:8088/hello"))
          "What is your first name?"
          (input ((type "text") (name "firstName")))
          (input ((type "submit") (value "Click Here"))))

The function xexpr->string converts an x-expression into the corresponding XML/HTML string. (Notice where this function is used in the server code.) There is also an inverse function, string->xexpr, which can sometimes be useful (see HTML tip at end of Homework 7).