Page Comparison

...

for sweet and spicy gochujang fried chicken.

Alternatively, instead of providing an url to an online image as the source input argument, you can also add image Base64 codes to the Prolog html.pl file and use those. Examples for variants of a microphone icon have already been included in this file. E.g., the mic_image_closed_src(Source) query will instantiate the Source variable with the Base64 code for the closed microphone icon

...

You can add your own images to the html.pl file by encoding them to Base64 format too. You can do so by following these steps:

1. Go to the https://www.base64encode.org/ site (don’t change any options on that page)

2. Go to the Encode files to Base64 format section

3. Upload an image (note that file size cannot exceed 192MB!)

4. Press the encode button, and

5. Download the code as a text file.

6. Copy the text in the file.

7. Add a fact with a predicate name for your image of your choosing (to illustrate we used myImageName) by adding the following template to the html.pl file: myImageName('data:image/png;base64,...')

8. Paste and replace the ... in the Prolog fact with the text you copied from the file (a very long encoded string representing your picture)

9. Now you can use myImageName(Source) instead of the picture(RecipeNr, Source) query to include your picture on your webpage

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).

...