| Table of Contents | ||||
|---|---|---|---|---|
|
...
This combined query will generate our example HTML code and return it as value in the Html variable.
img tag
div tag
The div tag is a versatile block element that can be used to organize and style HTML content in various ways. In the html.pl file provided to you we have defined a div/4 predicate div(Content, Class, Style, Html) that facilitates the generation of div elements with class and style attributes that you can set. The code that will be generated looks simply like a basic div element without any content yet:
| Code Block |
|---|
<div class="CLASS" style="STYLE">CONTENT</div> |
In this code template, CLASS refers to the value of the Class variable, STYLE to the value of the Style variable, and CONTENT to the value of the Content variable in the div(ContentAlthough this project is not about webpage development and is definitely not about promoting fancy interaction (remember to prioritize conversational interaction throughout the project!), by simply adding some images you can bring a webpage to life, making it more appealing to look at while also adding useful functionality. To start with the latter, users would like to see what the result would look like for the recipe they finally choose. To this end, links to the pictures of all of the recipes included in the recipe database have been included for you to make good use of (check out the recipe_database.pl file). But there are many other opportunities, of course, to add pictures if you like to your webpage design. To facilitate this, we have defined the img/4 predicate img(Source, Class, Style, Html) query. All of these variables need to be fully instantiated to generate HTML code that is returned in the output argument Html.
Many Bootstrap components are classes that can be used by means of the div tag. These include, for example, the container, jumbotron, alert, progress bar, spinner, card, flexbox, media, and grid system row and column classes. Check out all of these components in the W3 School tutorial or Bootstrap’s own overview. We provide one example to illustrate the use of the div predicate. The following code would generate a Jumbotron element:
...
which allows you to create an img HTML element that looks like:
| Code Block |
|---|
<img class="CLASS" style="STYLE" src="SOURCE" alt="Can not show this image"> |
Check out some of the class options here.
| Info |
|---|
If you don’t want to use an attribute for an HTML element while the predefined predicate requires the corresponding input argument, just replace the argument with the empty atom (string) ‘ |
div tag
The div tag is a versatile block element that can be used to organize and style HTML content in various ways. In the html.pl file provided to you we have defined a div/4 predicate div(Content, Class, Style, Html) that facilitates the generation of div elements with class and style attributes that you can set. The code that will be generated looks simply like a basic div element without any content yet:
| Code Block |
|---|
<div class="CLASS" style="STYLE">CONTENT</div> |
In this code template, CLASS refers to the value of the Class variable, STYLE to the value of the Style variable, and CONTENT to the value of the Content variable in the div(Content, Class, Style, Html) query. All of these variables need to be fully instantiated to generate HTML code that is returned in the output argument Html.
Many Bootstrap components are classes that can be used by means of the div tag. These include, for example, the container, jumbotron, alert, progress bar, spinner, card, flexbox, media, and grid system row and column classes. Check out all of these components in the W3 School tutorial or Bootstrap’s own overview. We provide one example to illustrate the use of the div predicate. The following code would generate a Jumbotron element:
| Code Block |
|---|
div(Content, 'jumbotron jumbotron-fluid px-3', 'text-align:center', Html) |
Of course, this only works if you add another query (or queries) to generate the Content for this Jumbotron. To add couple of lines of formatted text (a large title head and a paragraph), we could use the following code for creating a complete Jumbotron element with some text as a simple example:
| Code Block |
|---|
atomic_list_concat([
'<h3>Introduction</h3>',
'<p>You are about to interact with our conversational agent <b>YourAgentName</b>.'],
Content),
div(Content, 'jumbotron jumbotron-fluid px-3', 'text-align:center', Html) |
Of course, this only works if you add another query (or queries) to generate the Content for this Jumbotron. To add couple of lines of formatted text (a large title head and a paragraph), we could use the following code for creating a complete Jumbotron element with some text as a simple example:
...
The first query, using the built-in predicate atomic_list_concat
...
The first query, using the built-in predicate /2 generates HTML code that consists of the two HTML elements of a h3 heading following by a paragraph. These elements are just simply quoted each (remember to always use single quotes!) and put in that order in a Prolog list [...]. The atomic_list_concat/2 generates HTML code that consists of the two HTML elements of a h3 heading following by a paragraph. These elements are just simply quoted each (remember to always use single quotes!) and put in that order in a Prolog list [...]. The predicate then returns a new atom that is the concatentiation of these two elements in the output argument Content. This (quoted) HTML code then is passed on to the div/4 query in its first input argument (using the same variable name) to embed it in the Jumbotron element.
| Info |
|---|
We will often need to piece together parts of HTML code or elements. As a convention, we will use the |
...
for that purpose. The benefit of using this built-in predicate is that it allows us to put an arbitrary number of elements inside the list this predicate expects for its input argument and when |
The resulting HTML code looks like:
| Code Block |
|---|
<div class="jumbotron jumbotron-fluid px-3" style="text-align:center">
<h3>Introduction</h3>
<p>You are about to interact with our conversational agent <b>YourAgentName</b>.</p>
</div> |
| Info |
We will often need to piece together parts of HTML code or elements. As a convention, we will use the atomic_list_concat/2 for that purpose. The benefit of using this built-in predicate is that it allows us to put an arbitrary number of elements inside the list this predicate expects for its input argument and when atomic_list_concat(+List, -Atom) succeeds its output argument Atom unifies with the concatenated HTML code (as a single quoted atom data type) conversational agent <b>YourAgentName</b>.</p>
</div> |
| Info |
|---|
Padding and margins The HTML code above uses |
span tag
The span tag is an inline element that is commonly used to style HTML content. We have added a span/3 predicate span(Content, Style, Html) that just does that and nothing else. An example of a span tag that can be useful is to style the content and change the font family that is used within some HTML content:
...
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. |
...