| Table of Contents | ||||
|---|---|---|---|---|
|
...
Check out some of the class options here. The style attribute can be used, for example, to display an image inline (e.g., as part of a sentence in a paragraph) with style="display: inline;".
| 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) ‘ |
The Source argument for the predicate is a required input argument. You can use links to pictures that are online available here. For your convenience, for all of the recipes included in the database, the picture/2 predicate picture(RecipeNr, UrlLink) provides images for each recipe. As an example, to illustrate the use of the both picture/2 and img/4 predicates in a combined query, picture('1', Source), img(Source, 'img-thumbnail', 'height: 3rem', Html) would generate the following HTML element:
| Code Block |
|---|
<img class="img-thumbnail" style="height: 3rem" src="https://mobkitchen-objects.imgix.net/recipes/849A3215-2.jpg?auto=format&crop=focalpoint&domain=mobkitchen-objects.imgix.net&fit=crop&fp-x=0.5&fp-y=0.5&h=827&ixlib=php-3.3.1&q=82&w=1300&s=e97db51272669560eff9df6badbe8bc7" alt="Can not show this image"> |
which would show a small thumbnail version of the first recipe picture
...
for sweet and spicy gochujang fried chicken.
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:
...
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. |
...