• This predicate creates a list of HTMLElement JavaScript objects rather than a list of HTML tokens. The translation is done by means of JavaScript calls that create and manage objects.
• This version allows for nodes to be specified as Var=Spec. This processes Spec normally and binds Var to the created element.

The following terms are processed:

Var = Spec

Create Spec and bind Var to the created node.

Format - Args

Create a text node from the result of calling format/3.

&(Entity)

Create a text node with one character if Entity is an integer or a <span> holding the entity otherwise.

\ Rule

Call call(Rule), allowing for a user-defined rule. This rule should call html//1 to produce elements.

M:Rule

As \Rule, but calling in a module. This is the same as \(M:Rule).

List

Emit each element of the list.

Compound

This must but a term Tag(Content) or Tag(Attributes,Content). If Tag is an HTML element that has no content, a single argument is intepreted as Tag(Attributes). Attributes is either a single attribute of a list of attributes. Each attribute is either term Attr(Value) or Attr=Value. If Value is a list, it is concatenated with a separating space. The attribute names can either be the HTML name in lowercase or the DOM camelCase attribute name. HTML names are mapped by the multifile predicate html_dom/2.

JavaScriptObjecty

This should be an HTMLElement. It is inserted at this place.

Atomic

Atomic data creates a text node.

• Atomic data
  Atomic data is quoted using html_quoted//1.

• Fmt - Args
  Fmt and Args are used as format-specification and argument list to format/3. The result is quoted and added to the output list.

• \List
  Escape sequence to add atoms directly to the output list. This can be used to embed external HTML code or emit script output. List is a list of the following terms:
  • Fmt - Args
    Fmt and Args are used as format-specification and argument list to format/3. The result is added to the output list.
  • Atomic
    Atomic values are added directly to the output list.

• \Term
  Invoke the non-terminal Term in the calling module. This is the common mechanism to realise abstraction and modularisation in generating HTML.

• Module:Term
  Invoke the non-terminal <Module>:<Term>. This is similar to \Term but allows for invoking grammar rules in external packages.

• &(Entity)
  Emit &<Entity>; or &#<Entity>; if Entity is an integer. SWI-Prolog atoms and strings are represented as Unicode. Explicit use of this construct is rarely needed because code-points that are not supported by the output encoding are automatically converted into character-entities.

• Tag(Content)
  Emit HTML element Tag using Content and no attributes. Content is handed to html//1. See section 3.21.4 for details on the automatically generated layout.

• Tag(Attributes, Content)
  Emit HTML element Tag using Attributes and Content. Attributes is either a single attribute of a list of attributes. Each attributes is of the format Name(Value) or Name=Value. Value is the atomic attribute value but allows for a limited functional notation:
  • A + B
    Concatenation of A and B
  • Format-Arguments
    Use format/3 and emit the result as quoted value.
  • encode(Atom)
    Use uri_encoded/3 to create a valid URL query component.
  • location_by_id(ID)
    HTTP location of the HTTP handler with given ID. See http_location_by_id/2.
  • #(ID)
    Abbreviated for for location_by_id(ID).
  • A + List
    List is handled as a URL‘search’component. The list members are terms of the format Name = Value or Name(Value). Values are encoded as in the encode option described above.
  • List
    Emit SGML multi-valued attributes (e.g., NAMES). Each value in list is separated by a space. This is particularly useful for setting multiple class attributes on an element. For example:

            ...
            span(class([c1,c2]), ...),

  The example below generates a URL that references the predicate set_lang/1 in the application with given parameters. The http_handler/3 declaration binds /setlang to the predicate set_lang/1 for which we provide a very simple implementation. The code between ... is part of an HTML page showing the English flag which, when pressed, calls set_lang(Request) where Request contains the search parameter lang = en. Note that the HTTP location (path) /setlang can be moved without affecting this code.

  :- http_handler('/setlang', set_lang, []).
  
  set_lang(Request) :-
          http_parameters(Request,
                          [ lang(Lang, [])
                          ]),
          http_session_retractall(lang(_)),
          http_session_assert(lang(Lang)),
          reply_html_page(title('Switched language'),
                          p(['Switch language to ', Lang])).
  
  
          ...
          html(a(href(location_by_id(set_lang) + [lang(en)]),
                 img(src('/www/images/flags/en.png')))),
          ...