| Table of Contents | ||||
|---|---|---|---|---|
|
...
Generating an HTML webpage
By means of these and generate with the rule. The HTML code is represented in Bootstrap format, which is also clearly illustrated by examples below or on Bootstrap's documentation website (Bootstrap Documentation).
| Note |
|---|
Prolog Advice: To manipulate strings and atoms in Prolog it is useful to look at documentation of the following built-in functions: atomic_list_concat, atom_concat, string_concat, append, and maplist here: https://www.swi-prolog.org/. The predicate applyTemplate is a defined predicate that will be explained below. |
Prolog rules are used to add a condition to a webpage (i.e. webpage X is shown when Clause Y is true).
You add a condition that checks for a particular pattern ID to a Prolog rule in the html.pl file. Other simple conditions that you can add involve counting the number of recipes that are still available while in the recipe selection phase, etc. The general form of the page lay-out rules would be something like:
...
Prolog rules are used to add a condition to a webpage (i.e. webpage X is shown when Clause Y is true).
You add a condition that checks for a particular pattern ID to a Prolog rule in the html.pl file. Other simple conditions that you can add involve counting the number of recipes that are still available while in the recipe selection phase, etc. The general form of the page lay-out rules would be something like:
| Code Block |
|---|
myPage(Txt, Button, Html) :-
<HERE YOUR CONDITION FOR SHOWING THIS PAGE>,
% e.g. while recipe is being selected (check for e.g. currently active top level pattern id), we'll display recipe features
% below code that specifies the page layout for this context
applyTemplate('<div class="card mx-auto" style="width:67vw">~a</div>, Text, Html),
…
. |
...
Using and Understanding the code in html.pl
A Quick guide to using Bootstrap components not defined in html.pl
We briefly discuss an example on to illustrate how to use the code in html.pl yourself with Bootstrap components that you might want to use but that have not yet been introduced yet. To that end, suppose that you would like to create a lay-out with three images side-by-side. The first step you could take is to check which components Bootstrap offers to create such a lay-out. It turns out that a card deck might just be what you were looking for. It is advertised as something you would use when you “Need a set of equal width and height cards that aren’t attached to one another? Use card decks.” Bootstrap also provides the HTML template code as an example of how to use it. This is what that looks like:
| Code Block |
|---|
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is the first card.</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is the second card.</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is the third card.</p>
</div>
</div>
</div> |
How do we break this code down into pieces that we can (already) manage? We first scan the code for the HTML tags that are used in it. We find that the div tag is often used (with the classes "card-deck", "card", and "card-body"). We also find that the img tag is used as well as some variants of the <h5> and <p> tags with specific card-related classes added. We note that for each of these tags we already have the tools to generate them in Prolog. We can use the div/4 and img/4 predicates for the former tags and can use our strategy to quote basic HTML elements for the h5 and p elements (you can also introduce new predicates for these tags in combination with a class attribute if you like but we prefer to keep it simple here).
Now we have established that all the basic ingredients are available, the next step in our recipe is to create the separate parts of the HTML code by - in a sense - looking from the inside out. We first will generate the elements that are most embedded and then use those to build the elements in which they are directly embedded.
...
<p class="card-text">This is the third card.</p>
</div>
</div>
</div> |
How do we break this code down into pieces that we can (already) manage? We first scan the code for the HTML tags that are used in it. We find that the div tag is often used (with the classes "card-deck", "card", and "card-body"). We also find that the img tag is used as well as some variants of the <h5> and <p> tags with specific card-related classes added. We note that for each of these tags we already have the tools to generate them in Prolog. We can use the div/4 and img/4 predicates for the former tags and can use our strategy to quote basic HTML elements for the h5 and p elements (you can also introduce new predicates for these tags in combination with a class attribute if you like but we will keep things simple here).
Now we have established that all the basic ingredients are available, the next step in our recipe is to create the separate parts of the HTML code by - in a sense - looking from the inside out. We first will generate the elements that are most embedded and then use those to build the elements in which they are directly embedded. The most deeply embedded elements are the heading and paragraph elements. As suggested above, we simply quote these. In order to create a single atom we also concatenate these elements using the atomic_list_concat/2 predicate as follows:
| Code Block |
|---|
atomic_list_concat([
'<h5 class="card-title">Card title</h5>',
'<p class="card-text">This is the third card.</p>'], CardBodyContent) |
We introduced the CardBodyContent variable here to indicate that the HTML code generated by the atomic_list_concat query will be used as content for the card-body class element.
The template example uses three times exactly the same card body content. For practical use, you most likely will want to change the content for each of these three card bodies and generate separate HTML code for each. We did not go to that length but kept things simple to avoid duplicating code.
For the card-body class we can use the div/4 predicate, where we use the CardBodyContent variable to replace the default input argument Content variable for this predicate and fill in the class and style arguments. We then get as our next piece of code the following:
| Code Block |
|---|
div(CardBodyContent, 'card-body', '', CardBodyElement) |
For creating the card, we also need an image (again we do not bother to fill in the … in the example, which we leave up to you; check out the
We will now use Prolog to generate the HTML for such a card, using a given picture URL. The aim is to connect in a single string the static HTML code and the image URL (which differs according to the context of the conversation).
...