Web Application Programming in PicoLisp: Adding HTML Tags
Tags: webdev, picolisp, lisp, functional
Published: 2022-01-17 07:42:27

In the last post, we started the server and hosted a minimal "Hello World"-script. The resulting HTML source consisted of a single ``<body>`` tag. Today we will show how to add further tags.

----------------------------------

### HTML tags functions

HTML tags are used to structure the page. For example, ``<h1>`` stands for a title tag. We didn't apply any custom styling to the page yet; nevertheless the browser will render these tags to some built-in styles.

In PicoLisp, HTML tags are defined as **functions**. They are included in the ``xhtml.l`` library. Let's try them out.

Open the REPL (you can load the ``xhtml.l``-library directly from the command line):
```
$ pil @lib/xhtml.l +
: 
```

Let's test the function ``<h1>``. It takes two arguments: First a CSS attribute, and secondly the content to be wrapped in tags.

```
: (<h1> 'test "Hello world!")
<h1 class="test">Hello world!</h1>
```
As you can see, the ``<h1>`` function returns a ``<h1>`` element with the class name ``test`` and the content "Hello World".

-----------------------------------------

### Tag functions - check the source code

Now that we know more or less what these functions are doing, let's have a look at the library source code. You have two possibilities:

1. If you are familiar with using [``vip``](https://picolisp.com/wiki/?vip), you can inspect it in the REPL with ``(vi <div>)`` (or any other tag name you're interested in). Of course the library needs to be loaded.

2. Alternatively, you can also directly access the source code with any other text editor. You can find the file in the PicoLisp installation folder. Type ``$ locate xhtml.l`` in the terminal to find it.
   ```
$ locate xhtml.l
/usr/share/picolisp/lib/xhtml.l
```

This is the source code of the ``<div>`` function:

```
(de <div> (Attr . Prg)
   (tag "div" Attr 2 Prg)
   (prinl) 
```

When you scroll down, you will find the function definition for many other tags as well, like ``<div>``, ``<hr>``, ``<em>`` and so on. As you will see, many of these tag functions take two arguments: ``Attr`` for the CSS-attribute definition (which we will discuss in the next post), and a program ``Prg`` for the content. Both arguments are passed to a function ``tag``. After that, ``prinl`` prints a new line.



--------------------------------------------------

### A first HTML page

Now let's modify our ``helloworld.l`` file. As you can see below, the tags can be nested just like any other PicoLisp function. For this example, we set all the css-attributes to ``NIL`` - we will take care of it in the next post.

```
(html 0 "Hello" NIL 'foo
   (<h1> NIL "Hello World!")
   (<h2> NIL "This is a first test page.")
   (<p> NIL 
      "This is a text block. "
      (<strong> "Still the same text block. ")
      "Still a text block.")
   (<hr>)
   (<div> NIL
      (<h5> NIL "Let's test how nested divs look like.")
      (<div> NIL "This is a div in a div."
      (<ul> NIL
         (<li> NIL "Monday")
         (<li> NIL "Tuesday"
         (<ul> NIL
            (<li> NIL "Morning")
            (<li> NIL "Evening") ) ) ) ) ) ) 
```

Let's start the server. We can directly call the script from the command line by adding ``<filename.l>`` to the arguments.

```
$ pil @lib/http.l @lib/xhtml.l @lib/form.l  --server 8080 helloworld.l  +
```

This is what we see:

![testpage.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632473276464/cZ_vPXvOD.png)

Just to make sure that the nesting is correct, let's also check the source code. In Firefox you can do this with `` Ctrl-U``:

![sourcecode2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1632473568420/HX9TFq0Zv9.png)

The HTML-tags are properly nested, just like we defined it in our PicoLisp script.

----------------------------------

### Some further tags

What further tags do we have? We will not cover all of them, but let's skim quickly through ``xhtml.l``.

- ``<style>``: CSS styling (see also next post), ``<layout>``
- ``<span>`` -> short in-line container
- ``--``: shortcut to ``<br/>``; ``---``: shortcut to ``<br/><br/>``
- ``<hr>`` -> seperator line
- ``<small>``, ``<big>``, ``<em>``, ``<strong>``, ``<h1 - h6>`` --> text attributes
- ``<ol>``, ``<ul>``, ``<li>``, ``<dl>``, ``<dt>``, ``<dd>`` -> lists and definitions
- ``<p>`` -> paragraph, ``<pre>`` -> paraphrasing content (for example code)
- ``<href>``-> links, ``<this>`` -> link to current session URL
- ``<img>`` -> pictures
- ``<th>``,  ``<tr>``, ``<td>``, ``<thead>``, ``<tbody>``, ``<table>``, ``<row>``, ``<grid>``, ``<trident>``, ``<spread>`` -> table elements
- ``<tip>`` -> tooltip
- ``<button>`` -> button
- ``<menu>`` -> navigation menu, ``<tab>`` -> tabs
-  ``<post>``, ``<label>``, ``<field>``, ``<hidden>``, ``<passwd>``, ``<upload>``, ``<rgb>``, ``<area>``, ``<select>``, ``<check>``, ``<radio>``, ``<submit>`` --> form elements.

Besides all these tag functions, you also have the possible to use ``prinl`` to print out any custom tags - because the tag functions are basically only a short cut to ``prinl``. However, for most cases you will be able to find pre-defined functions.

The usage of most of these functions is pretty straightforward, and we will see many examples of them in the next posts as well. However, a full documentation is not (yet) available, so for details you need to consult the source code of ``xhtml.l`` (it's not that difficult to read!).

*[Here](https://picolisp-blog.hashnode.dev/levelling-up-1-read-the-docs) we explained how to check and read the source code.*

----------------------------------

### Google Maps and Open Street Map

Besides the functions in ``xhtml.l``, there is another library called ``gis.l``. There you can find the definitions for OpenStreetMap and GoogleMaps embedding.

The function names are ``<osm>`` and ``<google>``. We might see examples of that in later posts as well.

----------------------------------

In the next post, we will start to style these components with CSS.

---------------------------------

### Sources
- https://software-lab.de/doc/app.htm