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 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:
If you are familiar with using 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.
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:
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:
The HTML-tags are properly nested, just like we defined it in our PicoLisp script.
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 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
