cyberweb 0.4.174 → 0.5.225

data/doc/README.gen

@@ -1,48 +1,51 @@
 ADD_GOBOLINUX_AND_RUBY_HEADER
 ADD_TIME_STAMP
 
-<img src="https://i.imgur.com/GatV3S5.png" style="margin-left: 0.5em">
-<img src="http://shevy.bplaced.net/cyberweb_theme.png" style="margin-left: 0.5em">
+<img src="https://i.imgur.com/aNpDmmz.png" style="margin-left: 1.2em">
 
-## The History of the Cyberweb project
+## The (slightly convoluted) History of the Cyberweb project
 
-This project was created a very long time ago, in PHP - in the year
-2004 or so, give or take. (I used to think it was in 2002, but looking
-at old notes, it was more likely started in early 2004.)
+The cyberweb project was created a very long time ago, written in PHP, in the
+year **2004** or so, give or take.
 
-I was using custom functions to regulate serving web-related content
-back then, written in PHP.
+I was combining **custom functions** to control how to serve web-related
+content back then.
 
-The original **class WebObject**, for example, was written a very long time
-ago, perhaps in the year **2004** or something like this, when I
-transitioned away from PHP into ruby. I took all the old PHP code 
-and adapted it at that point.
+The original **class WebObject**, for instance, was written a very long time
+ago, perhaps in the year **2004** already or early **2005** - something like
+that, in PHP. When I eventually abandoned PHP I rewrote the parts I was
+using in PHP in ruby. The functionality that was initially part of cyberweb
+thus originated from a **legacy use case**. The original use case for
+**class WebObject** was to describe a web-object, similar to a .html
+file, but dynamic and adaptable in nature. A **.html page** can be
+generated from an instance of class WebObject, for instance.
 
-The Cyberweb-project was rewritten several times, so it may not be
-very similar to the old code from ~almost 20 years ago. The important
-core methods, though, may still be quite similar. For example, I
-was using div() in PHP already, and I am using div() in ruby too.
+The Cyberweb-project was rewritten several times over the next ~15 years
+or so. Today it is not quite so similar to the old code base in PHP
+anymore. The important core methods, though, are still somewhat similar.
+For example, I was using div() in PHP already, and I am using div() in
+ruby too.
 
-Ruby allows for more functionality out of the box, though, so I 
-can do:
+Ruby allows for more functionality out of the box, though, so I can do
+the following:
 
     div {
     }
 
-In PHP this is not easily possible, so ruby is better in this regard -
-more flexible.
+In PHP this is not easily possible, because the syntax is more rigid,
+so ruby is better in this regard - more flexibility in this regard.
 
-During that transition phase, from **php** to **ruby**, the project
+During that **transition phase**, from **php** to **ruby**, the project
 was renamed several times - first to **web_foundation**, then to
 **cybersprawl**, then to **Cyberweb**, then to **web_object** and
 then back to **Cyberweb** again. I think the name **Cyberweb** 
 is best among these alternatives. While **web_object** is the
 more technically correct and accurate term, as everything related
-to the www is handled via that object, I prefer the name
-**Cyberweb** in general for the whole project - it sounds
-futuristic. The name **WebObject** is a good name too, though,
-as we attempt to describe a particular "web-page" as a
-"web-object", basically.
+to the www is handled via that object (or such objects), I prefer the
+name **Cyberweb** in general for the whole project - it sounds
+rather futuristic. The name **WebObject** is a good name too,
+though, as we attempt to describe a particular "web-page" as a
+"web-object", with specific functionality, basically.
 
 **class WebObject** was originally the very main class I was
 using in PHP to describe my local knowledge base, an "app" where
@@ -65,27 +68,31 @@ The original <b>Cyberweb project</b> was "officially" started on
 **13.06.2012** (13th June in the year 2012) - that is, the name
 was first used in the year **2012**. In 2020 it came to an end
 and was replaced with the <b>WebObject</b> project, but in May
-2021 the original name was re-instated. Quite confusing!
+2021 the original name was reinstated. Messy history for the 
+win! \o/
 
 The project called <b>html_tags</b> was created at about the same
 time back then, in the year **2012**, in order to keep the code
 base of the newly generated project somewhat cleaner and smaller.
-**WebFoundation** was thus renamed to Cyberweb, but there still
-was a directory called **foundation/**. Old gem releases of **cyberweb**
-may still show that, back when I kept these old releases.
-
-In **August 2018**, I removed the **foundation/** subdirectory and
-integrated the code into other parts of the project instead.
+**WebFoundation** was thus renamed to Cyberweb - the original
+directory that kept the code there was put under the directory
+called **foundation/**. Old gem releases of **cyberweb**
+may still show that, back when I kept these old releases
+on rubygems.org.
+
+In **August 2018**, the **foundation/** subdirectory was removed
+and the code residing therein put into other parts of the project
+instead.
 
 The transition phase in **2012** happened to some extent because
 I was still using ruby 1.8.x and had to make several changes to
 the old web-foundation project, in order to have my code work on
 **ruby 1.9.3** anyway.
 
-The rewrite would allow me to change some design decisions I made earlier
-on, which were not that ideal - in other words, to allow me to discard
-some of the old code at the same time (which again happened in 2018,
-when I cleaned up the cyberweb project, after many years of
+The **rewrite*+ would allow me to change some design decisions I made
+earlier on, which were not that ideal - in other words, to allow me to
+discard some of the old code at the same time (which again happened in
+2018, when I cleaned up the cyberweb project, after many years of
 "semi-activity" only).
 
 The **rewrite** step worked for the most part, even though it took me
@@ -122,6 +129,15 @@ moments in time or may still exist:
 This may not be hugely important to know, but it explains a bit of
 the historic origin for the cyberweb project.
 
+## Cyberweb.localhost?
+
+Cyberweb.localhost? will simply return the String 'http://localhost'.
+
+This is only useful if you want to quickly test something on your
+own localhost (local webserver). I had to build "local" URLs and
+did not want to preface manually via 'http://', so it was easier
+to use a simpler method instead.
+
 ## Aim, Goals and Scope of the Cyberweb project
 
 This subsection will detail some of the goals of the Cyberweb project.
@@ -227,16 +243,24 @@ or not.
 
 The method **Cyberweb.set_path_to_images()** can be used to set the
 path to a global image directory, that is - a directory that holds all
-images. On my home system this defaults to **/home/x/data/images/**.
-
-I put almost all images into this directory, but there are exceptions
-to this.
-
-Note that this directory will only be of relevance if the configuration
-options for web_object were set up to use such a directory in the
-first place. Only image-related methods are affected by this 
+images. On my home system this defaults to **/home/x/data/images/**,
+so if you find any references to that directory in any of my projects
+then this is the reason as to why, since it is the default on my
+home setup.
+
+I put almost all images into this directory as-is, but there are
+a few exceptions to this as well. The important thing is that the
+cyberweb project has to **remain flexible**.
+
+Note that this directory will only be of relevance **if** the configuration
+options for the cyberweb project were set up to use such a directory in
+the first place. Only **image-related methods** are affected by this 
 setting anyway.
 
+Note that **Cyberweb.set_path()** is a shorter alias to this method;
+may be useful in IRB. Otherwise I recommend to use the longer 
+method name instead, as it is more explicit.
+
 ## Images
 
 If an image is not existing, but used within the Cyberweb
@@ -256,20 +280,6 @@ display the above notification for images not found. If it is set
 to normal or lower than that, the web_object project will not
 display that warning.
 
-## Balloon.css
-
-You can download the **balloon.css** file via class
-**DownloadBalloonCss** (**Cyberweb::DownloadBalloonCss**).
-
-This file resides at the location 
-<b>web_object/utility_scripts/download_balloon_css.rb</b>.
-
-It presently (May 2018) does not do much other than download
-that remote .css file.
-
-I needed a small "pop-up" for displaying additional information
-to some entries in a table, which is how I found **Balloon.css**. 
-
 ## Proper (default) order of arguments to many methods in the Cyberweb project
 
 The Cyberweb project uses quite a few methods that have more than 4
@@ -414,7 +424,7 @@ called **vim**).
 You can also query the current configuration via appending **config?**
 such as in:
 
-    http://localhost/DATA/personal/sitemap.cgi?config?
+    http://localhost/data/personal/sitemap.cgi?config?
 
 ## HTML Tables and the Cyberweb project
 
@@ -495,16 +505,6 @@ a later time back to **cyberweb** - yup, I change
 the project names way too quickly. But the name used to
 by cyberweb in the past, so I am slowly getting used to
 that name.
-
-## Creating input-buttons in a HTML-form field
-
-    <form> 
-    <input type="button" class="BG_GRAYSTD bblack1" value="Default" name="foo" onClick="test1(this.form)">
-    </form>
-
-    <form>
-    <input class="BG_GRAYSTD bblack1" type="button" value="Default" name="foo" onClick="test1(this.form)">
-    </form>
   
 ## HTML Entities
 
@@ -560,41 +560,31 @@ At least the name of the image directory.
 
 ## Viewing the source of a webpage
 
-Use the view_source() method to add a javascript button,
+Use the **view_source()** method to add a javascript button,
 to view the source of a page. The method view_source()
-is defined in the file shared.rb.
+is defined in the file 
+**cyberweb/web_object/misc.rb:**.
 
-## Modify the input tag
+You can, of course, combine this with other code elements. For
+instance, if you want to embed the view-source button into
+a div, and style it, then consider the following:
 
-You can modify the <input> tag within that via css by using:
+    div('BG_Black white','div_view_source') { view_source }
 
-    input.view_css {}
-
-## HTML IDs
-
-All HTML ids are registered into an array. To then show whether
-you have duplicated IDs in a page, do this:
-  
-    show_duplicated_ids()
-  
-Or in a more general way, use the #debug method, like so:
-  
-    w.debug
-
-This will report whether you have a duplicated ID or not.
-When the page is served, we will also display a little error
-message in case we have found duplicated IDs. This way we
-can notify the developer that there is some mistake in his
-page and we can correct this mistake then.
+This will create a div-tag with black background and white
+font colour, and the id of that div will be **div_view_source**.
+Inside that div-tag the view-source button can be found.
 
 ## The table-tag
 
-The tag table() now supports blocks. That means you can use arrays
-in tables:
+The tag that is generated via table() will create a HTML
+table. It also supports blocks. That means you can use
+arrays in tables as input, such as shown in the following
+example:
 
     table { %w( one two three for ) }
 
-Or styled with CSS:
+Or, styled with CSS:
 
     table('s1em bblack1') { %w(one two three for) }
 
@@ -778,7 +768,7 @@ to another page.
 
 Example:
 
-   http://localhost/DATA/misc/sitemap.cgi?redirect_to=ruby_todo
+   http://localhost/data/misc/sitemap.cgi?redirect_to=ruby_todo
 
 This would redirect me to my local todo-file in ruby. In fact:
 that was the primary reason why the code was added, so that I
@@ -789,14 +779,23 @@ run this may have to be modified - but for now it will remain
 as it is. It can be used to quickly "jump" to another page,
 both a local page or a remote page.
 
+If you want to do so via the meta-tag, consider using the
+following method:
+
+    Cyberweb.return_meta_redirect 'foobar.de'
+
+This would yield the following string:
+
+    <meta http-equiv="Refresh" content="1; URL="foobar.de">
+
 ## Viewing the content of any file
 
 You can view the content of any file via:
 
-    http://localhost/DATA/misc/sitemap.cgi?view_file=ruby_todo
+    http://localhost/data/personal/sitemap/sitemap.cgi?view_file=ruby_todo
 
-This can be disabled since as of **May 2021, by setting the
-**view_file: true** in the project configuration .yml file.
+This can be disabled since as of <b>May 2021</b>, by setting the
+<b>view_file: true</b> in the project configuration .yml file.
 I recommend to do so, as you probably don't need this 
 functionality. I needed it for my local webserver, to
 quickly test things, and view local files in the browser,
@@ -806,17 +805,31 @@ only).
 
 ## dropdown()
 
-You can use the dropdown() method to use several &lt;select>
-statements.
+You can use the **dropdown()** method to use several &lt;select>
+statements, if you use class **Cyberweb::WebObject**.
 
-Examples:
+Specific usage examples:
 
     dropdown( %w( a b c ) )
     dropdown( %w( a b c ) ) {{ selected: 2 }}
     dropdown( %w( a b c ) ) {{ selected: 3 }}
 
-The latter variant will have the second entry selected as default;
-we begin to count at 1 here, not 0.
+The **middle variant** will have the second entry selected as default;
+the **last variant** will have the third entry selected as default.
+
+Note that for the purpose of dropdown() we will begin to count
+at 1 rather than 0. So 1 refers to **the first entry**. Furthermore
+if the number given to **selected:** is too high then it will be
+automatically reduced to the last entry of that Array - this should
+simplify using the method a little bit.
+
+For a working example of the method have a look at the file
+**testing_the_select_tag.cgi**.
+
+Here is also a small screenshot with a bit of CSS styling to
+show how this looks:
+
+<img src="https://i.imgur.com/Lqk6rKo.png" style="margin-left: 2em">
 
 ## Cyberweb.display_all_files_in_this_directory
 
@@ -876,7 +889,7 @@ to style elements on a given webpage.
 
 ## Editable text
 
-HTML5 allows the visitor to modify text on a webpage (although
+**HTML5** allows the visitor to modify text on a webpage (although
 not persistently).
 
 The Cyberweb project also allows this. Example:
@@ -884,7 +897,38 @@ The Cyberweb project also allows this. Example:
     e('Type something here.') { :editable }
 
 This would make a span-tag, following by a br-tag,
-and the attribute that this is editable.
+and the attribute that this is editable. You can
+select some text and then just type as-is - and 
+thus modify the text.
+
+## Bold text in CSS
+
+Normal text usually equates to a font-weight value of
+<b>400</b> whereas bold text equals to a value of
+<b>700</b>.
+
+## Caret cursor in CSS
+
+You can style the colour of the cursor that appears in an
+input-field.
+
+Example for this:
+
+    .input_field {
+      caret-color: tomato;
+      font-weight: bold;
+      font-size: 30px;
+    }
+
+If you need a specific example, have a look at the following file:
+
+**cyberweb/examples/css/caret_colour_example.html**
+
+This may then look like this:
+
+<img src="https://i.imgur.com/dg0a9gd.png" style="margin-left: 2em">
+
+The relevant part is the red cursor in the ~middle in that input field.
 
 ## CSS helper code and how it relates to the Cyberweb project
 
@@ -979,7 +1023,9 @@ hand, expands horizontally as far as there is space, which is
 called "expand-to-fit".
 
 If you encounter a CSS rule with a <b>!important</b> classifier
-then this rule can not be overruled. It became a fixed rule.
+then this rule can not be overruled. It became a fixed rule. See
+elsewhere in this document in regards to more information about
+this.
 
 The hexadecimal notation #FFF is a short hand for #FFFFFF (which
 is actually white).
@@ -1405,12 +1451,25 @@ approach.
 
 ## Buttons
 
+**Buttons** are user-elements that can be **clicked**.
+
 The following should work, in principle:
 
     button {}
 
-My long-term goal is to make this DSL work in web-applications
-as well as toolkits such as ruby-gtk.
+My long-term goal in regards to the above is to make this DSL
+work in web-applications as well as in 'traditional' toolkits,
+such as the ruby bindings to **GTK** (ruby-gtk).
+
+A box-shadow effect applied to a button may yield to a
+**depth effect** for that button.
+
+An example for this follows:
+
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+
+See also the file at **cyberweb/examples/html/buttons_example.html**
+to see differently styled buttons in action.
 
 ## How to vertically align any element via CSS
 
@@ -1480,10 +1539,11 @@ This example shows how, in the main frame:
 
 ## Working with Grids in HTML/CSS
 
-You can add padding between the grid containers using grid padding or
-row-gap and column-gap.
+You can add **padding** between the grid containers using grid padding
+or row-gap and column-gap. This is a general CSS feature implemented
+for Grids specifically.
 
-Examples:
+Examples for that, in particular the two last lines:
 
     gap
     row-gap
@@ -1620,16 +1680,6 @@ then simply modify these classes in your web-page. Right
 now this is not trivial if you re-use the distributed .css
 files; at another moment in time the API may be changed to
 allow you to re-define the CSS class as-is.
-          
-## Input fields with a different background colour
-
-You can use input fields with a different background colour upon
-a mouse-focus event.
-
-Examples for this would be: 
-
-    input :text, 'Hello world!', :focus_with_salmon_background
-    input :text, 'Hello World!', :focus_with_salmon_background, :select_on_click
 
 ## Editing content on a webpage
 
@@ -1686,6 +1736,20 @@ To use a specific CSS style for these listings, do something like:
 
     Cyberweb.listing_css = '<b class="red">'
 
+You can also make use of ordered lists, via:
+
+    ordered_list %w( cat dog parrot deer horse )
+
+This would yield exactly this String (if you use Cyberweb::WebObject):
+
+    <ol>
+      <li>cat</li>
+      <li>dog</li>
+      <li>parrot</li>
+      <li>deer</li>
+      <li>horse</li>
+    </ol>
+
 ## Link in pages via link()
 
 You can link in other pages via the method link().
@@ -1798,76 +1862,6 @@ is to be able to do sinatra-specific calls that enable or
 disable certain things, in particular in regards to images,
 and have images work properly at the least on my home
 setup.
-  
-## JQuery
-
-The Cyberweb framework/toolset favours the use of jquery. Presently,
-since **May 2021**, the version that is to be used by default will be
-for jquery <b>3.6.0</b>. This may change at a later time.
-
-In the event that it is changed and the documentation here is not
-updated, you can always rely on the following method call to yield
-the correct version of jquery to be used:
-
-    Cyberweb.jquery_version?
-
-For example, the above method called would yield **3.6.0** in
-**May 2021**. Personally I always use the latest stable
-version of jquery.
-
-You can also query the jquery-ui version in use, via:
-
-    Cyberweb.jquery_ui_version?
-
-Again, this also has to be synced manually, via the
-.yml file called **project_configuration.yml**.
-
-Since as of **May 2021**, the cyberweb will also bundle this
-corresponding version of jquery and jquery-ui into the 
-**javascript_code/jquery/** subdirectory of the gem. This
-is solely done to simplify the use of jquery so that, for
-example, dragging an object becomes simpler and available
-by default, even if access to the www is unavailable at
-the current time.
-
-You can also call this method on a **Cyberweb::WebObject**
-instance via the following method:
-
-    report_the_jquery_version_in_use
-
-Both jquery-ui and jquery use the same licence as the Cyberweb
-project (MIT licence). See also this wikipedia entry if
-you want to read more about jquery and its history:
-
-https://en.wikipedia.org/wiki/JQuery
-
-To make a container **resizable** via the mouse, by using
-jquery, try this method:
-
-    jquery_resizable_via_the_mouse(id: :resizable_via_the_mouse)
-
-As **id** you simply pass in the id of the HTML element at hand.
-In this case, the symbol called :resizable_via_the_mouse.
-
-See also the file **JQUERY.md** for a more thorough reference.
-
-Note that in **May 2021**, support for jquery is actually mildly
-deprecated. This is not set in stone and it does not mean that
-jquery support will be removed, as far as the cyberweb project
-is concerned; it is more that I want to see whether we have
-better or simpler alternatives, without being tied into jquery
-too closely.
-
-The basic syntax for jquery, in javascript, goes like this:
-
-    $(selector).action()
-
-The general rules for JQuery go along these lines, in JavaScript:
-
-    $(this).hide()    # hides the current element.
-    $("p").hide()     # hides all <p> elements.
-    $(".test").hide() # hides all elements with class="test".
-    $("#test").hide() # hides the element with id="test".
 
 ## draggable_image() and the HTML draggable attribute
 
@@ -1894,11 +1888,23 @@ within the current directory, you can try the following API:
 
     in_dir_image 'foobar.png', 'marl3em bblack1'
 
+## Generate system settings
+
+If you want to store the system settings in a file, you may be
+able to use this:
+
+    cyberweb --systemsettings
+
+Normal users of cyberweb won't need this functionality. I only
+wanted to have this available as a separate instruction, to
+simplify updating the cyberweb project.
+
 ## Textarea in HTML
 
-You can make a textarea HTML tag readonly via readonly.
+You can make a textarea HTML tag readonly via **readonly**,
+as an additional attribute to the textarea-tag.
 
-Example for this:
+Specific example for this:
 
     <textarea readonly>
     Foobar.
@@ -1911,6 +1917,9 @@ as:
       resize: none;
     }
 
+The example **cyberweb/examples/html/readonly_textarea_example.html**
+demonstrates this.
+
 ## CSS first-line rule
 
 The **first-line** rule can be used to style the first line in a given
@@ -1927,7 +1936,18 @@ Example:
 
 The first line would then appear larger and in another colour.
 
-Several properties can be modified within the :first-line
+Another example:
+
+    .foobar:first-line{
+      font-size: 40px;
+      line-height: 50px;
+      font-weight: bold;
+      color: #662929;
+    }
+
+In some ways this is similar to using a h-tag such as h1 or h2.
+
+Several properties can be modified within the <b>:first-line</b>
 rule, such as **font properties**, **color properties**, 
 **background properties**, **word-spacing**, **letter-spacing**, 
 **text-decoration**, **vertical-align**, **text-transform**, 
@@ -1941,56 +1961,6 @@ The three main variants are:
     div.b { text-transform: lowercase; }
     div.c { text-transform: capitalize; }
 
-## CSS, text-shadow support and drop-shadow support
-
-If you want to have shadows added to a given text then the text-shadow
-CSS property may be useful. Be careful when using this, though, because
-it can make the text harder to read.
-
-Let's look at an example for the h1 HTML tag:
-
-    h1 {text-shadow:2px 2px #FF0000;}
-
-Syntax used here (and in general):
-
-    text-shadow: h-shadow, v-shadow, blur, color
-    text-shadow: 2px 5px tomato;
-
-Another example, for a CSS rule:
-
-    .red_text_shadow {
-      text-shadow: red 0 -2px;
-    }
-
-Strangely enough you can also re-arrange the arguments a litte:
-
-    /* colour | offset-x | offset-y | blur-radius */
-    text-shadow: #fc0 1px 0 10px;
-
-    /* offset-x | offset-y | blur-radius | colour */
-    text-shadow: 1px 1px 2px black; # This is my preferred style.
-
-I do not know why they went that route, but I recommend to just
-stick to one style, and avoid the other.
-
-Note that text-shadow is not the only way you can use to modify
-text. drop-shadow is another example.
-
-In CSS the rule would be like this:
-
-    drop-shadow(2px 4px 8px #585858);
-
-In cyberweb, you can use this API:
-
-    generate_drop_shadow :red, :default, 'drop_shadow_red'
-    div('drop_shadow_red') {
-      h3 'This part should show a drop-shadow effect - but in red'
-    }
-
-This would yield the following text (shown as image):
-
-    <img src="https://i.imgur.com/lSDl3qt.png" style="margin-left:2em">
-
 ## CSS letter-spacing property
 
 <b>letter-spacing</b> can be used to decrease or increase the 
@@ -2080,7 +2050,8 @@ The attribute <b>accesskey</b> is allowed in the following tags:
     input
     textarea
     label
-    legend und button
+    legend
+    button
 
 ## CSS ::before and CSS ::after
 
@@ -2137,9 +2108,9 @@ Example:
 ## CSS input autofocus
 
 You can modify <input> elements by setting the focus onto 
-them the moment a page loads.
+them the moment a page loads, via **autofocus**.
 
-Example:
+Example for this:
 
     <form action="/action_page.php">
       <label for="fname">First name:</label>
@@ -2149,7 +2120,7 @@ Example:
       <input type="submit">
     </form> 
 
-This is a bit similar to ruby-gtk3, e. g. .do_focus or .set_focus(true). 
+This is a bit similar to ruby-gtk3, e. g. .do_focus or **.set_focus(true)**. 
 
 ## CSS grouping and CSS selectors
 
@@ -2397,6 +2368,29 @@ The other properties may be useful in some cases, e. g. when you
 wish to indicate some button-like element - but visually, I think
 the first three styles are by far the most appealing ones.
 
+## Styling a row of a table and styling a table in general
+
+You can use CSS rules such as this:
+
+    tr {
+      background: wheat;
+    }
+    tr.even {
+      background: none;
+    }
+
+This can be used to use a different colour for each even
+row. You still have to use the CSS class called **even**
+in this case manually, though. (There may be other solutions
+but for now this is simply documented here as-is - perhaps
+in the future this may become more flexible.)
+
+This may look like this:
+
+<img src="https://i.imgur.com/PGefpZb.png" style="margin-left: 3em">
+
+See also the file at **cyberweb/examples/html/table_with_header_example.html**.
+
 ## CSS first-letter
 
 CSS allows us to modify the first-letter in, for example, a 
@@ -2477,6 +2471,31 @@ part </script>, such as:
     }
     </script>
 
+## The CSS !important rule
+
+Let's start with a syntax example.
+
+Consider the following CSS rule for the **body** tag:
+
+    body {
+      background: steelblue !important;
+    }
+
+This will set the background colour of the whole body of
+the page to the colour **steelblue**.
+
+It is important to use that very syntax, e. g. to close
+the CSS rule at hand via **!important;**. Otherwise it
+may not work properly.
+
+Once such an **!important** rule applies then it takes
+precedence over every other rule, including the
+**style** attribute. Later set **!important** rules
+can override earlier set **!important** rules, though.
+
+Use this with caution, though, as it really overrides
+any other settings, including user-defined settings.
+
 ## Including external .css files
 
 The syntax for adding external (standalone) .css files is as shown in
@@ -2688,13 +2707,6 @@ an operator and not a function - but it seems simpler to use
 the () just as it is used for other functions in JavaScript
 as well.
 
-## Use image-checkbox (on and off)
-
-Examples:
-
-    show_image_checkbox :on, 'posab','top:10em;right:18%'
-    show_image_checkbox :off, 'posab','top:10em;right:18%'
-
 ## CSS zoom-on-hover effect
 
 This can be done like this:
@@ -2722,6 +2734,20 @@ I typically put this into a special CSS class such as:
       transform: scale(1.1);
     }
 
+And then, for instance, for a generate **image** tag:
+
+    img(:document, 'enlarge_this_image_on_hover')
+    # or this example for a draggable image:
+    dimg 'BOX.png', 'VAM enlarge_this_image_on_hover'
+
+The small drawback (or advantage, depending on your point of view)
+is that the CSS rule has to be specified as-is.
+
+In theory we could also autogenerate the CSS rule and use an
+API such as **img(:document) {{ enlarge_this_image_on_hover: '25%' }}**
+instead, but for now I'll leave it with the above CSS-based approach.
+It's quite simple really.
+
 ## Valid values for CSS font-size:
 
     xx-small
@@ -2734,95 +2760,16 @@ I typically put this into a special CSS class such as:
     xx-large
     larger
 
-## Useful quotes when designing websites and web-apps
- 
-"When you are creating a website, the primary goal as a designer
-should be to get rid of the question marks users have when 
-visiting that site."
+## Cyberweb::Header
 
-"The most important thing a designer can do is to understand
-the basic principle of eliminating question marks that a user
-has when visiting a website. Keep things simple."
+Examples:
 
-"If you can not make something self-evident, you should at the
-least make it self-explanatory."
+    Cyberweb::Header.size = 'h3' # Set to a smaller header.
+    Cyberweb::Header.reset
 
-"If a web page is going to be effective, it has to work most
-of its beautiful magic at a single glance."
-
-"The average visitor rarely spends much time reading all 
-content on a given web page, so focus on designing fewer
-elements that can be easily navigated, without too much
-distracting clutter."
-
-"If your design forces a visitor to incur a small learning 
-curve, make sure that the added value from this design 
-change leads to it being worth that additional learning 
-curve."
-
-"Clarity trumps consistency."
-
-"Each webpage should have a clear visual hierarchy."
-
-"Components in a webpage that are related logically
-should also be related visually."
-
-"In order to make a website 'scan-friendly', make good use of
-headings having a larger font size. The headings should 
-indicate what a subsection is about."
-
-"When using a heading, make them visually somewhat closer
-to the section they belong to, rather than equally spaced
-to the preceding paragraph."
-
-"If you need the visitor to make a difficult choice, provide as
-much guidance as necessary - but not more. Be succinct here
-and provide only the smallest amount of information that
-will help the user."
-
-"Omit needless words. Vigorous writing is concise."
-
-"Try to make everything on a web-site self-explanatory or as
-close to it as possible."
-
-"Navigation should ideally remain clear, simple, and consistent."
-
-"It may be useful to consider using an identifier, such as a logo
-or an image, for the website, and display this e. g. on the
-upper left corner. This may help visitors identify where they
-are, in particular if they tend to use several tabs in their
-browser."
-
-"If your website makes use of a menu-bar or navigation-bar, 
-consider highlighting the current location that the user
-has or uses on that website."
-
-"Ideally a website should convey the big picture, and make it
-clear what the site is about."
-
-"If possible consider to use visual identifiers on the
-whole web-application at hand, to give visitors the
-right idea about this being a cohesive and integrated
-unit."
-
-"Changing a website at a later time is not necessarily trivial.
-Some percentage of users that have grown accustomed to a 
-layout will resist almost any kind of change, and even
-apparently simple changes often turn out to have
-far-reaching effects."
-
-"Focus ruthlessly on fixing the most serious problems first."
-
-## Cyberweb::Header
-
-Examples:
-
-    Cyberweb::Header.size = 'h3' # Set to a smaller header.
-    Cyberweb::Header.reset
-
-Not sure if this is still necessary in 2021; at a later time
-it will be decided whether to keep this or not. If it is kept
-then this subsection will be expanded.
+Not sure if this is still necessary in 2021; at a later time
+it will be decided whether to keep this or not. If it is kept
+then this subsection will be expanded.
 
 ## Working with HTML form elements
 
@@ -2852,9 +2799,11 @@ generate the web-app as-is, though.
 ## Cyberweb::HtmlTemplate
 
 class **Cyberweb::HtmlTemplate** can be used to fill it with HTML
-specific content. More documentation will be added here eventually;
-for now, let's just show a simple example how I tend to use this
-class:
+specific content.
+
+Let's show a specific example how this may be used:
+
+    require 'cyberweb/requires/require_the_html_template.rb' # This is the recommended way to require class HtmlTemplate.
 
     Cyberweb::HtmlTemplate[
       title: 'Status',
@@ -2863,27 +2812,65 @@ class:
                '</pre>'
     ].to_s
 
-It is possible since as of 18.06.2021 to pass CSS classes into this,
-via:
+This would represent a "full" HTML page, as a String.
+
+It is possible, since as of **18.06.2021**, to pass **CSS classes**
+into this, via:
 
     css_classes:
 
 For example, passing 'darkblue' to that key means that the CSS
-class 'darkblue' will be available, which ultimately comes down
-to <b>color: darkblue</b>.
+class 'darkblue' will be made available, which ultimately comes
+down to <b>color: darkblue</b>.
 
-I needed this functionality to pull in only the CSS classes that
-I use on a particular page generated by class Cyberweb::HtmlTemplate.
+I needed this functionality to pull in only the CSS classes
+that I use on a particular page generated by class
+Cyberweb::HtmlTemplate.
 
 Various additional entries are available. For example, if
 you want to modify the css-style in use for the body tag
-then you can use the following variant:
+then you can simply use the following variant:
 
     body_css_style: 'background-color:#DFD1FF'
 
-In the long run the goal is to extend class HtmlTemplate in
-such a way that all html-generation used within the Cyberweb
-project can be handled by it.
+In the long run the goal here is to extend class HtmlTemplate
+in such a way that all html-generation used within the
+Cyberweb project can be handled by it.
+
+You can also pass ad-hoc CSS style into it. Example:
+
+    Cyberweb::HtmlTemplate[
+      body:  _, # The content of <body> goes in here.
+      css_style: '
+        img {
+          border: 8px solid #black;
+          padding: 2px;
+        }
+        ' # and ^^^ there you can put your CSS rules into class HtmlTemplate
+    ].to_s
+
+You can also pass in some ad-hoc javascript code via:
+
+    javascript_code:
+
+All this does is add the proper &lbrack;script> tag to it.
+
+You can also specifically add jquery support for the HtmlTemplate.
+The following example shows how this can be done:
+
+    html_template = Cyberweb::HtmlTemplate[
+      title:      'This is a test-page,
+      body:       HtmlTags.p('Another test.','','','font-size:1.8em'),
+      use_jquery: true
+    ].to_s
+
+    puts html_template
+
+Typing <b>Cyberweb::HtmlTemplate[]</b> is quite cumbersome, though. Since
+as of October 2022 a simpler toplevel API is available:
+
+    Cyberweb.html_template
+    Cyberweb.html_template(body_content) # The String you pass here will be the body of the HTML page.
 
 ## Embed youtube videos and videos in general
 
@@ -2967,6 +2954,13 @@ use the following method:
 
     header_for_sitemap 'This is some generic header.'
 
+You can also use an Array for a special method:
+
+    sitemap_array('Hratie','Tulis','Kuulk')
+
+This will be treated as an Array of headers to be used for the
+sitemap that will be generated.
+
 ## Generating standalone webpages (.html files)
 
 This subsection deals with the cyberweb project generating standalone
@@ -3041,6 +3035,10 @@ the following:
     }
     </style>
 
+Remember that you can also use a title for a href tag. Example:
+
+    <a href="http://foobar.de/" class="slateblue" title="Some Superlong Title here">
+
 ## The br-tag
 
 The br-tag can be used in HTML to add a linebreak.
@@ -3097,16 +3095,128 @@ If you do not need drag-and-drop support then simply use:
 If **drag_local_image_or_remote_image()** is too long to type,
 use the alias called **dimg2**.
 
+To quickly embed a remote image, you can use the following
+API:
+
+    embed_remote_image
+    embed_remote_image 'https://foobar.com/cat.jpg'
+    embed_remote_image 'https://foobar.com/cat.jpg','mar1em mars2em' # This here passes CSS classes to the image at hand.
+
+## Cyberweb.convert_back_german_umlauts
+
+This method can be used to 'convert back' german umlauts, when the
+encoding failed somewhere, such as converting '%d6' into 'Ö'. It is
+mostly an ad-hoc method that most users of the project will not need,
+but sometimes there may be a use case to make use of that method,
+such as when one uses open-uri to download a remote website into a 
+local file, if said remote website contains german umlauts.
+
+In fact this was precisely the reason why that method was added.
+
+## Setting the date-of-creation for a web-app based on WebObject
+
+Since as of **October 2021** you can use:
+
+    created_when '20.08.2021'
+
+To **indicate when the webpage at hand has been created**. This will then
+add a meta-element to the page, which is roughly equivalent to:
+
+    <meta name="DCTERMS.created" scheme="DCTERMS.ISO8601" content="2010-03-17T13:31:50"/>
+
+I am not sure whether this is super-useful or not, but I wanted
+to add a method that keeps track of the creation-time of 
+web-apps based on web_object, which is the main reason why
+this functionality was added. At the least it helps me remember
+when a web-app was created.
+
+## autogenerated_system_settings.yml
+
+The file <b>cyberweb/yaml/autogenerated_system_settings.yml</b> is created
+via the external file **roebe/classes/generate_system_values.rb**.
+
+This file will contain entries such as:
+
+    SYSLIB_DIR: "/usr/lib/"
+
+This was needed because in some environments these directories are
+not defined, yet there are examples where the cyberweb project
+may need to know these paths. Thus, the hardcoded values are
+stored in that .yml file. You will probably never need the .rb
+file or the .yml file, but it is here documented to explain why
+it exists.
+
+## Column width in CSS
+
+You can specify a column width via **column-width: 250px;**.
+
+The following screenshot shows this:
+
+<img src="https://i.imgur.com/485E80P.png" style="margin-left: 2em">
+
+## The meter tag in HTML
+
+HTML allows us to use a **meter** tag.
+
+Example in HTML:
+
+    <label for="value1">Low</label>
+    <meter id="value1" min="0" max="100" low="30" high="75" optimum="80" value="25"></meter>
+
+This would eventually yield a page that may look like this:
+
+<img src="https://i.imgur.com/7f1ICEY.png" style="margin-left: 2em">
+
+This is documented here in the event that we may need this one day.
+
+## Unicode and Encoding
+
+This subsection is currently a stub - in the future it may be expanded
+to contain more useful information.
+
+On the world wide web you can sometimes see greek symbols displayed
+on a homepage. This often makes use of the &quot;math> tag.
+
+Preliminary support for this was added to the cyberweb project in
+October 2021. This is incomplete right now but hopefully will become
+more inclusive in the future.
+
+Following next is just one example to add (display) the greek
+symbol **omega** on the webpage at hand:
+
+    add_omega_symbol_semantics
+
+## Sanitizing .html files
+
+Sometimes a .html file is "compressed", aka newlines are removed.
+Everything is then on a single line.
+
+Some editors struggle with this; and it is quite ugly.
+
+Thus, an ad-hoc method was added to Cyberweb.
+
+Its API is:
+
+    Cyberweb.sanitize_this_string_by_adding_a_newline_after_every_closing_HTML_tag
+    Cyberweb.sanitize_this_string_by_adding_a_newline_after_every_closing_HTML_tag('/Depot/j/foobar.html')
+
+Pass a local .html file to the method; alternatively a String should do
+well. Every closing > html tag found will be turned into ">\n" instead.
+Thus, you get a nicely split .html page. (Ideally we should use a more
+sophisticated regex, but I really added this just as a throw-away
+action, to sanitize a mangled .html page.)
+
+This can also be called **de-minify-script**.
+
 ## Objectified HTML Tags
 
-Objectified HTML tags are something like this:
+**Objectified HTML tags** are something like this:
 
-    puts Cyberweb::ObjectifiedHtmlTags::Span.new('hey there') # => "<span>hey there</span>"
-    puts Cyberweb::ObjectifiedHtmlTags::Span.new('hey there').align_to_the_left # => "<span style="text-align: left;">hey there</span>"
+    puts Cyberweb::Objectified::HtmlTags::Span.new('hey there') # => "<span>hey there</span>"
+    puts Cyberweb::Objectified::HtmlTags::Span.new('hey there').align_to_the_left # => "<span style="text-align: left;">hey there</span>"
 
-In other words we may treat HTML tags as strings that can be
-embedded. The idea for this has been inspired by ruby-gtk,
-such as:
+In other words we may treat HTML tags as strings that can be embedded.
+The idea for this has been inspired by **ruby-gtk**, such as:
 
     widget1.add(widget2)
 
@@ -3121,7 +3231,7 @@ In late September 2021, the textarea-tag was added.
 
 Example:
 
-    textarea = Cyberweb::ObjectifiedHtmlTags::Textarea.new('content')
+    textarea = Cyberweb::Objectified::HtmlTags::Textarea.new('content')
     # You can also use this instead:
     #   textarea = html_textarea
     textarea.class = 'rounded_border_6px bblack1 FS2em pad8px'
@@ -3135,19 +3245,27 @@ HTML tags will become objectified, as an additional option. You
 need to decide for yourself whether you want to use this or not;
 the one-line approach in regular HTML is probably shorter.
 
-The following table, alphabetically sorted, shows the currently
-(**September 2021**) available objectified HTML tags as part of
-the cyberweb project. More may be added in the future.
+The following table, sorted alphabetically, shows the currently
+(<b>February 2022</b>) available objectified HTML tags as part
+of the cyberweb project. More may be added in the future.
 
 Name of the HTML tag | Implementation Status    | True HTML tag
 ---------------------|--------------------------|--------------
   a                  |          added           |     yes
-  abb3               |          added           |     yes
+  abbr               |          added           |     yes
+  blockquote         |          added           |     yes
+  body               |          added           |     yes
   button             |          added           |     yes
+  canvas             |          added           |     yes
+  cite               |          added           |     yes
   combobox           |          added           |     no
+  details            |        not yet added     |     yes
   div                |          added           |     yes
   embed              |          added           |     yes
+  fieldset           |          added           |     yes
+  figure             |          added           |     yes
   form               |          added           |     yes
+  head               |          added           |     yes
   h1                 |          added           |     yes
   h2                 |          added           |     yes
   h3                 |          added           |     yes
@@ -3156,8 +3274,12 @@ Name of the HTML tag | Implementation Status    | True HTML tag
   h6                 |          added           |     yes
   hbox               |          added           |     no
   img                |          added           |     yes
+  map                |          added           |     yes
+  meta               |          added           |     yes
+  object             |          added           |     yes
   p                  |          added           |     yes
   pre                |          added           |     yes
+  progress           |          added           |     yes
   span               |          added           |     yes
   table              |          added           |     yes
   textarea           |          added           |     yes
@@ -3197,29 +3319,1269 @@ I want to try to combine an OOP approach for the www with the
 old variant that cyberweb used in the last 15 years. It is a 
 bit too verbose for my taste still, but eventually I should
 have ironed this out. 
+
+Let's have a look how we could use an objectified table.
+
+Raw example:
+
+    alias e puts
+    table = Cyberweb::Objectified::HtmlTags::Table.new(
+      [
+        [1,2,3,4,5,6,7,8,9],
+        [1,2,3,4,5,6,7,8,9],
+        [1,2,3,4,5,6,7,8,9],
+        [1,2,3,4,5,6,7,8,9],
+        [1,2,3,4,5,6,7,8,9]
+      ]
+    )
+    table.id = 'hover_transition'
+    table.css_class = 'rounded_border_8px wid100 bblack2'
+    table.css_style = 'font-size: 3.5em'
+    # We can even add headers:
+    table.headers  = %w( Month Savings )
+    e table # And output it here.
+
+The above code will generate:
+
+    <table class="rounded_border_8px wid100 bblack2" id="hover_transition" style="font-size: 3.5em">
+      <tr>
+        <th>Month</th>
+        <th>Savings</th>
+      </tr>
+      <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>
+      <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>
+      <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>
+      <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>
+      <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>
+    </table>
+
+You could then either embed this into HTML, or simply use it from a
+ruby file - be it sinatra, a .cgi file or anything else.
+
+In the long run I plan to add a lot more methods to these objectified
+HTML tags, if these are useful. The idea is that we can treat web-pages
+as distinct objects, with convenience features that make creating such
+objects simpler.
+
+It is also planned to eventually replace the more complicated "legacy"
+code in the WebObject or toplevel-namespace of Cyberweb to make more
+use of such objectified HTML tags - in particular for the more advanced
+use cases.
+
+You can use some custom javascript code too.
+
+For example, if you want to have a div where the user can select
+the whole content of said div-tag on a left-mouse-button-click
+event, consider using code such as the following:
+
+    div = Cyberweb::Objectified::HtmlTags::Div.new('<h2>Hello world!</h2>')
+    div.id = 'test_div'
+    div.on_clicked { :select_everything }
+
+Note that this requires an ID. See the file
+**select_everything_example.cgi** for a variant that works on
+my home setup.
+
+You may also use some shortcuts here and there. For example, if you
+look at the above last line, the **div.on_clicked { :select_everything }**
+variant, then you could also simplify this a bit towards:
+
+    div.on_click_select
+    div.on_clicked_select # Or this variant.
+
+This is literally the same as the variant above, but you can use fewer
+characters to do the same. Sometimes less is more - but always think
+about whether you want to prefer the more succint variant; sometimes
+the longer variant is more readable, in particular when you come
+back to a project many months lateron. Note that right now, in
+October 2021, only some javascript-driven actions are added. This
+will be slowly extended, and then documented here as well.
+
+You can respond to on-mouse-hover events via JavaScript too.
+
+Consider the following div variable, assigned to an objectified
+HTML tag, as outlined above.
+
+Now you use:
+
+    div.css_class = 'BG_Black white'
+    div.on_mouse_hover {{ bg: :orange }}
+
+This would make the background of that div tag black (as specified
+by the CSS rule called **BG_Black**, which is distributed in the
+cyberweb project), and then, on a mouse-hover event over that
+div change the background of the whole div to **orange**. When the
+user moves the mouse cursor away the old colour is reinstated
+again.
   
-## Useful Links
+Some of the functionality of the **Objectified::HtmlTags** is tested via
+the file **cyberweb/test/complex_tests/testing_objectified_html_tags.rb**.
 
-This subsection just keeps a few useful resources. This may
-become obsolete over time, so don't expect all links to 
-work or be very useful. It's just a random collection
-really, last updated in **May 2021**.
+Support for the **canvas** tag was added in **October 2021**. The
+**canvas** tag allows us to draw arbitrary objects onto the 
+browser.
 
-https://catswhocode.com/css-tricks/
-https://validator.w3.org/
-https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Auswahllisten
-https://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF
-https://meiert.com/en/indices/css-properties/
-https://webdesignerwall.com/tutorials/advanced-css-menu
-http://www.ericmeyeroncss.com/projects/01/
-http://www.selfhtml5.org/html5-tag-systematik/
-https://hyperstack.org/
+Note that you can mix Cyberweb::WebObject with objectified-html-tags.
+
+For instance:
+
+    entry_for_the_name_of_the_card = html_input
+    entry_for_the_name_of_the_card.css_class = 'bblack2 pad8px'
+  
+    table2('mars1em','','',
+      'Name of the card: ',entry_for_the_name_of_the_card.string?
+    )
+
+This would put an input-tag into the second entry at the table.
+
+The next example shows how to add a button that, on mouse hover
+event, **changes its colour to lightblue**:
+
+    button = html_button
+    button.text = 'Save'
+    button.css_class('larger bblack2 pad4px marl6em mart1em pad5px s1em')
+    button.on_hover_colour(:lightblue) # This currently does not work for all HTML colours, but it works for :lightblue.
+    addnl(button.to_s) # This line is currently needed if you use WebObject; in the future we may be able to skip having to do this.
+
+In November 2021 I am still experimenting.
+
+Consider the following ruby code for the objectified HTML tag:
+
+    _ = html_h1('Batterien')
+    _.css_class 'martb1px hover_pulse_grow'
+    _.append_css_manager('css_rule_for_hover_pulse_grow(8)')
+    ee _.result?
+
+Alternatively this slightly shorter variant:
+
+    _ = Cyberweb.oop_h1('Batterien', 'martb1px hover_pulse_grow')
+    _.append_css_manager('css_rule_for_hover_pulse_grow(8)')
+    ee _.result?
+
+This will add a HTML h1 tag, with some special CSS that allows
+for pulsing growth. The number 8 means 8 iterations, so 4
+times growing up (because every step, forward and reverse,
+counts as +1).
+
+I am not yet very happy with the above. It's still too verbose
+for my taste - but the good thing is that we actually
+auto-generate CSS here. That way we do not have to carry
+specific .css files - we simply autogenerate them anew.
+
+## Objectified HTML Tags versus the default class-based HTML Tags
+
+You may have noticed that there are two groups of classes that are
+similarly named.
+
+For example:
+
+    Cyberweb::Table
+
+versus
+
+    Cyberweb::Objectified::HtmlTags::Table
+
+The first variant is older; at this point it is almost 10 years
+old. The latter variant is newish, about 1 year old or even
+less than that (as of October 2021).
+
+So, which variant to use?
+
+Well, right now the behaviour is not identical, and they have
+different use cases. Perhaps in the future I may unify towards
+objectified HTML tags, but for now the two will have to co-exist.
+
+Whenever possible I will update the older variant, e. g.
+**Cyberweb::Table**, to tap into functionality that is 
+made directly available within **Cyberweb::Objectified::HtmlTags::Table**,
+to give an example.
+
+So, perhaps in the long run, all unique functionality that is currently
+made available by Cyberweb::Table and similarly named classes, may
+be found under the objectified HTML tags. The latter is more robust,
+IMO, and has more flexible use cases.
+
+## Placeholder text
+
+Placeholder text can be assigned to a textarea HTML tag. Let's first
+show the raw HTML code for this, mixed in with a bit of CSS:
+
+    Describe the physical attributes of your character next:<br><br>
+    <textarea rows="4" cols="50" style="margin: 1em" placeholder="Describe your character here ..."></textarea>
+
+This would yield the following result in the browser:
+
+<img src="https://i.imgur.com/WqVL83L.png" style="margin: 1em; margin-left: 3em">
+
+You can use the **input** tag to designate a placeholder text to use.
+
+Only two HTML attributes can receive the **placeholder attribute**.
+These are:
+
+    <input>
+    <textarea>
+
+An example for this follows for the input tag:
+
+    <input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"><br><br>
+
+And for the textarea tag as well:
+
+    <textarea placeholder="Describe your complaint here ..."></textarea> 
+
+See also the distributed example file at **cyberweb/examples/input_placeholder_example.html*.
+
+It is possible to style the placerholder-text via CSS.
+
+For instance, if you would like to use the color **steelblue* then
+use the following CSS rule:
+
+    ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+      color: red;
+      opacity: 1; /* Firefox */
+    }
+
+## CSS rules in general
+
+This subsection contains a few explanations to CSS rules in general.
+
+Inheritance: after a property has been applied to a particular
+element, its children retain those property values as well. That
+way you can consistently style these elements via the same CSS
+rules.
+
+Normally when a CSS value is changed, the change is instant. This
+can be avoided by the **transition** property, which allows us
+to animate from the old state to a new state.
+
+## Remote images at imgur
+
+I have some local .cgi files that request images stored in a path
+that is not accessible by the local webserver. Sometimes I can
+put it into WebImages and use it, such as via Base64 encoding -
+but sometimes I just want to be able to link to it via an
+**img** tag. So in these cases I am fine linking in to remote
+images.
+
+As I may forget which image is available, here comes a listing -
+this may be extended over time:
+
+<img src="https://i.imgur.com/EbiyEtQ.png">
+<img src="https://i.imgur.com/HnjTJj4.png">
+
+## Downloading a remote webpage
+
+You can use <b>Cyberweb.download_webpage()</b> to download a remote
+webpage.
+
+This isn't hugely sophisticated - it just performs URI.open().read
+and then dumps that string into a local file. The file **bin/download_webpage**
+is representing that functionality from the commandline.
+
+Usage example from within Ruby code:
+
+    Cyberweb.download_webpage('https://en.wikipedia.org/wiki/Tom_and_Jerry')
+
+## Tooltip example via CSS
+
+A tooltip is often used to specify extra information about something when
+the user moves the mouse pointer over an element.
+
+Have a look at the file at <b>cyberweb/examples/css/css_tooltip.html</b>.
+
+This shows a simple CSS tooltip. Adjust the style, colours, width
+according to your own preferences.
+
+## hr_stars
+
+You can use the method call **hr_stars** to display three stars
+aligned one to another.
+
+This may look as the following image shows:
+
+<img src="https://i.imgur.com/moDx2f1.png" style="margin-left: 2em">
+
+## cmd1, cmd2, cmd3
+
+The three methods called **cmd1**, **cmd2**, **cmd3**, can be used to
+show commands that the user can input. The **1**, **2** or **3** part
+refers to the indent-level, so the number **3** means **3x the 
+basic indent level**.
+
+Note that **cmd** is an alias to **cmd1**.
+
+In the last ten years or so, the code for this was stored under the
+module PredefinedMethods, but in December 2021 this was changed and
+became part of **internal_hash.rb**. The latter shall slowly replace
+all other toplevel-instance variables for the Cyberweb project.
+The net gain will be that the new code is easier to maintain.
+
+What is the use case for cmd1 or cmd2 or cmd3?
+
+See the following examples for this:
+
+    e 'Input these instructions:'
+    br
+    cmd1 'ls -la'
+    cmd2 'cd /tmp'
+    # and so forth
+
+Note that you can also customize the toplevel CSS for cmd1, cmd2
+and cmd3. The following example shows how to add the steelblue
+colour to these:
+
+    append_to_cmd1 'steelblue'
+    append_to_cmd2 'steelblue'
+    append_to_cmd3 'steelblue'
+
+## Cyberweb::RouteHandlerModule
+
+This module shall eventually replace sinatra for my own needs.
+I will not port all of sinatra's functionality, but I want
+to be able to use the **core** functionality for my own 
+custom web-related needs.
+
+To use puma, use:
+
+    Cyberweb.puma
+
+And for webrick, use:
+
+    Cyberweb.webrick
+
+These methods were added mostly for convenience. If you are
+curious have a look at the code to find out which is the
+'real' method.
+
+## Rebuilding Sinatra
+
+Sinatra is a small webframework, built on top of Rack. It provides
+a useful DSL for specifying what the given application should
+respond to, and what it will send back.
+
+The DSL can be as simple as this:
+
+    get "/hello" do
+      [200, {}, "Hello from Sinatra!"]
+    end
+
+    post "/hello" do
+      [200, {}, "Hello from a post-Sinatra world!"]
+    end
+
+The **get()** method must take a path (which is the first
+argument) and an associated handler block - which is the
+part within the **do/end** clause.
+
+A very simple definition may be the following variant:
+
+    def get(path, &handler)
+      route("GET", path, &handler)
+    end
+
+    def route(verb, path, &handler)
+      @routes[verb] ||= {}
+      @routes[verb][path] = handler
+    end
+
+So, in other words: we will append new verb-entries to
+the main hash called **@routes**.
+
+This can then be used like this:
+
+    route_handler.get "/hello" do
+      [200, {}, ["Hello world!"]]
+    end
+
+    puts route_handler.routes
+
+The next method that has to be defined, if we want to
+support Rack, is .call(), such as:
+
+    def call(env)
+    end
+
+## Hover.css
+
+Since as of **November 2021** the cyberweb project makes use
+of **Hover.css** (licence: **MIT**):
+
+http://ianlunn.github.io/Hover/
+
+The .css is distributed as-is. Note that some names were changed,
+though, to make it more 'logical'.
+
+## Web-safe fonts
+
+The following list is assumed to contain web-safe fonts, for
+use in HTML pages (via CSS):
+
+    Arial (sans-serif)
+    Verdana (sans-serif)
+    Helvetica (sans-serif)
+    Tahoma (sans-serif)
+    Trebuchet MS (sans-serif)
+    Times New Roman (serif)
+    Georgia (serif)
+    Garamond (serif)
+    Courier New (monospace)
+    Brush Script MT (cursive)
+
+Note that the names of CSS fonts in general are case insensitive.
+Thus you can lowercase them too, if you would like to.
+
+You can also use **generic fonts**. Five are available by default,
+being: <b>serif, sans-serif, cursive, fantasy and monospace</b>.
+Serif resembles Times New Roman, sans-serif resembles <b>Arial</b>.
+
+Most text on the Web is displayed with a **sans-serif** font family.
+
+## Balloon.css
+
+You can download the **balloon.css** file via class
+**DownloadBalloonCss** (**Cyberweb::DownloadBalloonCss**).
+
+This file resides at the location 
+<b>web_object/utility_scripts/download_balloon_css.rb</b>.
+
+It presently (May 2018) does not do much other than download
+that remote .css file.
+
+I needed a small "pop-up" for displaying additional information
+to some entries in a table, which is how I found **Balloon.css**. 
+
+## Grayscale filtering on an image
+
+**CSS** allows us to "remove" colours in an image. I call this
+the **grayscale filter**.
+
+Cyberweb comes with a default CSS class that may be of help
+here - simply attach the CSS class **grayscale** to the
+image at hand if you want it to "lose" colours (for display
+purposes only; of course nothing is lost in the image as 
+such, only the display of said image is modified via CSS).
+
+## The progress bar in HTML5
+
+You can use a progressbar to indicate progress based on
+percentage values. This is described here in detail:
+
+https://css-tricks.com/html5-progress-element/
+
+In cyberweb you can use:
+
+    progress
+    progress('35 / 100') # 35%
+
+At a later time we may add some javascript to indicate
+a counter-progress. Right now (as of February 2022)
+this is not possible though, so this part has to come
+at a later time.
+
+## Converting from a .html page to a cyberweb-object
+
+The file **bin/html_to_cyberweb_converter** can be used
+to convert some .html files into cyberweb-objects. This
+class has been created in February 2022, but it does not
+yet work very well. In the future this may change.
+
+The idea is that we can grab any .html page, re-build
+its logic into cyberweb, and allow you to modify this
+in any way, shape or form. The long-term goal is to 
+adjust any .html page to any different format, in 
+any way, shape or form. It would allow users a 
+higher level of abstraction to deal with a HTML
+page. For instance, you can re-style the CSS classes
+in use as-is.
+
+(Note that presently, as of 2022, class WebObject is
+actually not used; HtmlTemplate is used instead. The
+reason is because WebObject is too big and not flexible
+enough right now. In the future this may be resolved,
+but for now, class HtmlTemplate will generate the
+new .html file.)
+
+## autoextend
+
+If you make use of Cyberweb::WebObject then you may be able
+to describe a webpage as an "object". Various methods will
+be made available at that point.
+
+The API may include a sort of DSL like this:
+
+    english('Title goes here') {
+    }
+
+This kind of means that the webpage at hand will be using
+**english** as its primary language. And the first argument
+will become the title of that webpage. (Note that presently
+only english() and german() are available. It's not making
+any real difference, but perhaps I should add alias-names
+for other languages as well. Not so many users of this
+project aside from english as the primary language in use,
+though.)
+
+Various other methods part of WebObject exist that help
+here, one of which is **autoextend**. This method is also
+aliased onto **enable_namespace**.
+
+That method will include various other modules. One module that
+was somewhat recently (March 2022) added was 
+<b>Cyberweb::Objectified::Mask</b>. This module will pull
+in HTML-tag support. So, for instance, **oop_h1()** can then
+be used as a method, which will refer to using h1 as the HTML
+tag. These objectified (OOP) HTML tags are described in
+more detail in other subsections of this document (**README.md**).
+
+Including the namespace for <b>Cyberweb::Objectified::Mask</b> is
+done mostly for convenience, so that the user does not have to
+manually include this module.
+
+## Drawing a coloured circle via CSS
+
+You can draw a circle via CSS.
+
+Let's first show the CSS rules for this:
+
+    div.circle {
+      width: 300px;
+      height: 300px;
+      background: #2762e9;
+      border-radius: 50%;
+    }
+
+Next you can use HTML to draw the circle:
+
+   <div class="circle"></div>
+
+That's it.
+
+I found this to be simple and potentially useful, so I added
+an API to the cyberweb project to support this.
+
+The API goes like this:
+
+    Cyberweb.draw_circle()
+    Cyberweb.draw_circle(width: 200)
+    Cyberweb.draw_circle(width: 200, height: 500)
+    Cyberweb.draw_circle(width: 200, height: 500, background_color: :steelblue)
+    Cyberweb.draw_circle(width: 200, height: 500, background_color: :steelblue, border_radius: '30%')
+
+Pass a Hash to the method. Note that this will return the CSS rule
+as-is, as well as return the div-tag String. Cyberweb::BaseModule
+will directly embed this if you use <b>draw_circle()</b>.
+
+Here is a partial screenshot showing three such examples; only the
+second example has a border-radius of 50%. See also the example
+<b>cyberweb/examples/advanced/draw_circle/draw_circle.cgi</b>.
+
+<img src="https://i.imgur.com/k5wFnwn.png" style="margin: 1em">
+
+## JQuery
+
+The Cyberweb framework/toolset favours the use of jquery. Presently,
+since **May 2021**, the version that is to be used by default will be
+for jquery <b>3.6.0</b>. This may change at a later time.
+
+In the event that it is changed and the documentation here is not
+updated, you can always rely on the following method call to yield
+the correct version of jquery to be used:
+
+    Cyberweb.jquery_version?
+
+For example, the above method called would yield **3.6.0** in
+**May 2021**. Personally I always use the latest stable
+version of jquery when possible.
+
+You can also query the **jquery-ui version in use**, via:
+
+    Cyberweb.jquery_ui_version?
+
+Again, this also has to be synced manually, via the
+.yml file called **project_configuration.yml**.
+
+Since as of **May 2021**, the cyberweb will also bundle this
+corresponding version of jquery and jquery-ui into the 
+**javascript_code/jquery/** subdirectory of the gem. This
+is solely done to simplify the use of jquery so that, for
+example, dragging an object becomes simpler and available
+by default, even if access to the www is unavailable at
+the current time.
+
+You can also call this method on a **Cyberweb::WebObject**
+instance via the following method:
+
+    report_the_jquery_version_in_use
+
+Both jquery-ui and jquery use the same licence as the Cyberweb
+project (MIT licence). See also this wikipedia entry if
+you want to read more about jquery and its history:
+
+https://en.wikipedia.org/wiki/JQuery
+
+To make a container **resizable** via the mouse, by using
+jquery, try this method:
+
+    jquery_resizable_via_the_mouse(id: :resizable_via_the_mouse)
+
+As **id** you simply pass in the id of the HTML element at hand.
+In this case, the symbol called :resizable_via_the_mouse.
+
+See also the file **JQUERY.md** for a more thorough reference.
+
+Note that in **May 2021**, support for jquery is actually mildly
+deprecated. This is not set in stone and it does not mean that
+jquery support will be removed, as far as the cyberweb project
+is concerned; it is more that I want to see whether we have
+better or simpler alternatives, without being tied into jquery
+too closely.
+
+The basic syntax for jquery, in javascript, goes like this:
+
+    $(selector).action()
+
+The general rules for JQuery go along these lines, in JavaScript:
+
+    $(this).hide()    # hides the current element.
+    $("p").hide()     # hides all <p> elements.
+    $(".test").hide() # hides all elements with class="test".
+    $("#test").hide() # hides the element with id="test".
+
+Some of this is a bit cumbersome to type and use, so the Cyberweb
+project simplifies some of it.
+
+For instance, rather than type out the document_ready 
+functionality via $<b>(document).ready(function(){}</b> 
+you can simplify this via the following method:
+
+    document_ready() # No arguments in this case, which is rather pointless.
+    document_ready('$("h1").css("color", "lightgreen");') # ← Real usage example here.
+
+This may not appear to be of a huge help, but it gets rid of a bit
+of boilerplate code, which I think is useful in its own right.
+Future changes may even simplify this further, but for now 
+<b>let's keep it simple</b>.
+
+## Working with HTML forms, including creating input-buttons in such a form field
+
+    <form> 
+    <input type="button" class="BG_GRAYSTD bblack1" value="Default" name="foo" onClick="test1(this.form)">
+    </form>
+
+    <form>
+    <input class="BG_GRAYSTD bblack1" type="button" value="Default" name="foo" onClick="test1(this.form)">
+    </form>
+
+You can style &lsaquo;input> fields with a different background colour
+upon a mouse-focus event.
+
+Examples for this would be: 
+
+    input :text, 'Hello world!', :focus_with_salmon_background
+    input :text, 'Hello World!', :focus_with_salmon_background, :select_on_click
+
+View the file at **cyberweb/examples/simple/input_example_with_coloured_focus.cgi**
+to see this work in action.
+
+You can modify the &lsaquo;input> tag within that via css by using:
+
+    input.view_css {}
+
+Note that &lsaquo;input type="text"> only works for a single line of
+user input. If you would like to have the user work via multiple
+lines then you have to use the &lsaquo;textarea> tag instead.
+There may be work-arounds, such as giving the text-input the
+<b>word-break: break-word;</b> attribute, but this may not work
+on every browser.
+
+Some shortcuts exist within the Cyberweb project. For instance,
+rather than do:
+
+    input :checkbox
+
+You can do:
+
+    input_checkbox
+
+Same with submit and other variants:
+
+    input_submit
+    input_radio
+
+This may not be a huge improvement, but I wanted to offer
+it in the event that some users like to avoid using the
+<b>:</b> for the symbol.
+
+Combining a label and input-text is possible via Cyberweb
+too. Examples:
+
+    label_and_input_text :foobar
+    label_and_input_text id: :foobar
+    label_and_input_text id: :foobar, :br
+    label_and_input_text id: :foobar, :linebreak
+    label_and_input_text id: :foobar, :middle_break
+    label_and_input_text :fname, 'First name:'
+
+The last variant is essentially the same as this in HTML:
+
+    <label for="fname">First name:</label><br>
+    <input type="text" id="fname" name="fname"><br>
+
+If you have a need or use case to use a checked checkbox
+then you can use a variant such as this:
+
+    checked_checkbox name: 'valid_ninja'
+
+It may be important to specify the name parameter, as
+shown above; otherwise it can be omitted.
+
+This checked checkbox looks about like this:
+
+<img src="https://i.imgur.com/Fn0GasM.png" style="margin: 1em">
+
+## Use image-checkbox (on and off)
+
+Examples:
+
+    show_image_checkbox :on, 'posab','top:10em;right:18%'
+    show_image_checkbox :off, 'posab','top:10em;right:18%'
+
+## The CSS class called select_everything
+
+This document already mentioned how to use JavaScript to select
+everything.
+
+Interestingly it is possible to achieve the same nowadays, without
+JavaScript - by making use of *CSS**.
+
+Cyberweb integrates this via the CSS class called <b>.select_everything</b>.
+
+Simply add it to any tag and when the user clicks on it via his or her
+mouse, then all content is selected. On Linux this will also assign
+to the xorg-buffer, so you can use a one-left mouse-button click,
+and then use the middle-mouse button to paste it onto the commandline.
+Very convenient! \o/
+
+## CSS tables versus original HTML tables versus flexbox and grid layouts
+
+There are various possibilities to lay out HTML containers on a webpage.
+The simplest one is the old HTML table. This one worked really well.
+
+Lateron we had support via simple div-tags, as well as the float element.
+Then came grid layouts and flexbox.
+
+Which variant to use?
+
+Well - I have consistently had problems with both grid layouts as well
+as flexbox. HTML tables, on the other hand, work really well, and so
+do CSS tables. I have no idea why, but for me CSS tables seem to be
+the best variant. Flexbox and grid lead to increased complexity,
+and always created issues for me, so I mildly deprecated using it
+instead; perhaps one day they will become simpler, but for now I
+will stick to CSS tables.
+
+How to use a CSS table? Make use of <b>display: table;</b> as
+well as <b>display: table-row</b>. That way you can kind of
+**simulate** tables.
+
+The following CSS rules show this:
+
+    .grid {
+      display: table;
+      border-spacing: 5px
+    }
+    .row {
+      display: table-row
+    }
+    .cell {
+      width: 50px;
+      height: 50px;
+      background: grey;
+      display: table-cell;
+    }
+    .row div:last-child {
+      background: red
+    }
+
+If you need to set a maximum width then the following may
+work:
+
+    <table style="width: 90%; table-layout: fixed">
+
+
+## class Cyberweb::ImagesToHtml
+
+This inconspicuously small class can take a directory (as input),
+determine all images that can be found in said directory (such as .jpg,
+.png, .gif files and so forth), and then create a **.html** page that
+has entries to each of these images, thus displaying them, via the
+img-HTML tag.
+
+The class supports **jquery drag** operations on every image, so that the
+user can move these images via the mouse cursor, just for a better
+visual effect, and the ability to reposition the images.
+
+The <b>reason</b> why this class was written was to quickly display images
+that you have made available locally. I did not want to use an image
+viewer when I could just view this in a .html page as-is.
+
+In **March 2022** the **--videos** option was added. This is used to,
+rather than gather images, gather videos. That way you can have a 
+local collection of video files and have them show up in the .html
+page, in your browser. Note that actual playback tends to be limited
+to .mp4 files - I could not get older .avi files to work, for instance.
+No idea if it is possible to do so or not, so preferentially try to
+make use of .mp4 files here.
+
+In <b>May 2022</b> another option was added, called -html-table. This
+will arrange the images in a HTML table layout, by default 3 images
+per row. You can use more or fewers rows though. For instance, 
+to use 4 rows make use of:
+
+    images_to_html --table=4 # For 4 rows.
+
+I tend to prefer 3 or 2 images per row, though. 2 images for smaller
+monitors; 3 images is the best, in my opinion. 4 images tends to be
+cluttered, and more than 4 is, in my opinion. not really advisable.
+
+## Working with local files in HTML - input type="file"
+
+You can use:
+
+    <input type="file">
+
+To give the user a way to handle local files conveniently.
+
+You can limit the file types handled by this input tag via:
+
+    accept="image/png, image/jpeg"
+    <input type="file" accept="image/png, image/jpeg">
+
+## CSS, text-shadow support and drop-shadow support
+
+The CSS text-shadow can be used to simulate an engraved text. 
+
+If you want to have <b>shadows</b> added to a given text then
+the text-shadow CSS property may be useful. Be careful when using
+this, though, because <b>it can make the text harder to read</b> -
+so perhaps <b>use it only for some headers or larger text</b>
+rather than for all text content.
+
+At any rate, let us next look at a simple example for the 
+<b>h1 HTML tag</b>, how it can be styled via the text-shadow
+CSS rule:
+
+    h1 {
+      text-shadow: 2px 2px #FF0000;
+    }
+
+The <b>syntax</b> used here (and in general) is as follows:
+
+    text-shadow: h-shadow, v-shadow, blur-radius, color
+    text-shadow: 1px 1px 2px black;
+    text-shadow: 2px 5px tomato; /* Note that you can also omit values, as seen here on this line. */
+
+Another example, for a CSS rule:
+
+    .red_text_shadow {
+      text-shadow: red 0 -2px;
+    }
+
+Strangely enough you can also re-arrange the arguments a litte bit:
+
+    /* colour | offset-x | offset-y | blur-radius */
+    text-shadow: #fc0 1px 0 10px;
+
+    /* offset-x | offset-y | blur-radius | colour */
+    text-shadow: 1px 1px 2px black; # This is my preferred style.
+
+I do not know why they went that route, but I recommend to just
+stick to one style, and avoid the other. Seems easier to remember
+when one can be consistent about the arguments.
+
+Note that <b>text-shadow</b> is not the only way you can use to modify
+text. <b>drop-shadow</b> is another CSS property that can be
+used in this regard.
+
+In CSS the rule for <b>drop-shadow</b> would be as follows:
+
+    drop-shadow(2px 4px 8px #585858);
+
+More specifically what these **four values** mean:
+
+    drop-shadow(offset-x offset-y blur-radius color)
+
+If you make use of the **cyberweb** project then you
+can use the following API:
+
+    generate_drop_shadow :red, :default, 'drop_shadow_red'
+    div('drop_shadow_red') {
+      h3 'This part should show a drop-shadow effect - but in red'
+    }
+
+This would yield the following text (shown as <b>image</b>,
+for convenience):
+
+<img src="https://i.imgur.com/lSDl3qt.png" style="margin-left:2em">
+
+Let's look at another example:
+
+    generate_drop_shadow :darkblue,
+                         '4px 2px 4px',
+                         'drop_shadow_lightblue'
+    div('drop_shadow_darkblue pad0px mar0px') {
+      h2 dot(105, 'marr12px')+
+         'Fancy Text',
+         'ud mart5px'
+    }
+
+This would yield the following text (shown as image):
+
+<img src="https://i.imgur.com/Ufs2IHl.png" style="margin-left:2em">
+
+You can also use the internal CSS class called **shadow_div_without_restrictions**.
+
+Give it a try on a div-element, such as via:
+
+    div('shadow_div_without_restrictions') {
+      h2 'Hello world!'
+    }
+
+See also the file at 
+<b>cyberweb/examples/css/shadow_example_in_CSS/shadow_example_in_CSS.cgi</b>.
+
+A similar effect is shown by the following image:
+
+<img src="https://i.imgur.com/96wV0Vm.png" style="margin: 1em; margin-left: 4em">
+
+The important thing to look at is the border-area around the central
+div-container. You can see that it is surrounded via a border; that
+is what the CSS class <b>shadow_div1</b> is achieving.
+
+Since as of <b>November 2021</b> you can also use objectified-html-tags.
+The drawback is that it is currently a bit verbose.
+
+Example:
+
+    _ = Cyberweb.oop_h1('Batterien', 'martb1px')
+    css_manager = Cyberweb::CssManager.new
+    css_manager.css_rule_for_drop_shadow(:lightgreen) # Generate the CSS rule here.
+    _.css_class 'martb1px drop_shadow_lightgreen' # Use the CSS rule - note the last part.
+    _.css_manager 'css_rule_for_drop_shadow(:lightgreen)'
+    _.add_to_pre_content css_manager.result_as_CSS_style?
+
+Or simpler:
+
+    _ = Cyberweb.oop_h1('Batterien', 'martb1px')
+    _.css_class 'martb1px drop_shadow_lightgreen'
+    _.css_manager 'css_rule_for_drop_shadow(:lightgreen)'
+    _.add_to_pre_content(
+      Cyberweb.css_manager { css_rule_for_drop_shadow(:lightgreen) }.css_style?
+    )
+
+Unfortunately the second example (aka the one right above ^^^) does not
+work yet. I am not entirely certain how to enable this - ruby's
+meta-patterns begin to confuse me.
+
+Since my brain is too feeble, I actually wrote a class instead
+that will autogenerate some CSS rules that can be used.
+
+These CSS rules are stored in the file called **drop_shadow.css**
+and work without needing any meta-pattern or autogenerator.
+
+To use these in your own scripts, do something like this:
+
+    p('drop_shadow_chartreuse')     { ee 'Hello world!' }
+    p('drop_shadow_chocolate')      { ee 'Hello world!' }
+    p('drop_shadow_coral')          { ee 'Hello world!' }
+    p('drop_shadow_cornflowerblue') { ee 'Hello world!' }
+    p('drop_shadow_cornsilk')       { ee 'Hello world!' }
+    p('drop_shadow_cyan')           { ee 'Hello world!' }
+    p('drop_shadow_darkblue')       { ee 'Hello world!' }
+    p('drop_shadow_darkcyan')       { ee 'Hello world!' }
+    p('drop_shadow_darkgoldenrod')  { ee 'Hello world!' }
+
+This is currently hardcoded to 5px. At some point this default
+may change, but for now I think 5px is a good compromise.
+
+The actual CSS rule will look like this:
+
+    .drop_shadow_cornflowerblue { filter: drop-shadow(5px 5px 5px cornflowerblue); }
+
+This is possible for all registered HTML colours.
+
+Have a look at the file <b>cyberweb/examples/advanced/advanced/drop_shadow_examples.cgi</b>
+to see how this may look like.
+
+## HTML IDs
+
+Each <b>HTML tag</b> may have an id entry. The id entry, in HTML, is typically
+defined like this:
+
+    id="some_value" # A generic example.
+    &lt;div id="some_div">&lt;h2>Hello world!&lt;/h2>&lt;/div> # A better example.
+
+Which values are permissive here?
+
+For HTML4 ID tokens must begin with a letter
+(which is [A-Za-z]) and <b>may</b> be followed by
+any number of letters, digits ([0-9]), hyphens
+("-"), underscores ("_"), colons (":"), and
+periods (".").
+
+In August 2022 I confirmed this, via the following ID:
+
+    date_01.09.2022
+
+So you can even use '.' characters. I note this down here
+as I tend to forget things - so this documentation here is
+a reference for me as well as for others.
+
+As far as the cyberweb project is concerned, all <b>HTML
+ids</b> are registered into an array (if you use
+Cyberweb::WebObject). To then show whether you have
+duplicated IDs in a page, do use the following method:
+  
+    show_duplicated_ids()
+  
+Or in a more general way, use the #debug method, like so:
+  
+    w.debug
+
+This will report whether you have a duplicated ID or not.
+
+When the page is served, we will also display a little error
+message in case we have found duplicated IDs. This way we
+can notify the developer that there is some mistake in his
+page and we can correct this mistake then.
+
+Have a look at the corresponding source code to see how
+this is actually implemented.
+
+## .show_this_local_directory()
+
+The method <b>.show_this_local_directory()</b> can be used
+to show content of a local directory. It is available for
+<b>class Cyberweb::WebObject</b>.
+
+I plan to extend this in the coming weeks and months. The
+key idea is that we can use this in .cgi scripts and
+sinatra to show the content of different directories.
+
+## The <mark> tag
+
+You can highlight text in HTML via:
+
+    <p>Foo<mark>bar</mark></p>
+
+## Lazy loading of HTML elements, such as the img tag
+
+You can use:
+
+    loading=lazy
+
+To load images at a later time - that is when the user
+scrolls to such an image, hence the term "<b>lazy 
+loading</b>" for this functionality.
+
+Let's have a look how this looks in raw HTML:
+
+    <img src="foobar.jpg" loading="lazy" alt="Alternative Text">           
+
+So all you have to do is add the part <b>loading="lazy"</b> to
+the image tag (img) at hand.
+
+The Cyberweb project supports this in both the traditional way, as
+well as the OOP variant offered by cyberweb.
+
+The examples for this are:
+
+    img 'foobar.jpg', loading: lazy
+    img('foobar.jpg') { :lazy }
+
+If you want to use it via the OOP variant:
+
+    _ = oop_image('foobar.jpg')
+    _.lazy_loading # or _.lazy
+    puts _ # => <img src="foobar.jpg" loading="lazy">
+
+As you can see, the OOP variant of cyberweb allows us to assemble
+the desired HTML tag as-is. It may seem quite verbose, but
+remember that you also get a lot of flexibility that way.
+
+## The method images_css() in class Cyberweb::WebObject
+
+Sometimes you have several images and may want to apply the
+same CSS rules to all of them.
+
+For instance, I use the CSS class <b>bblack1</b> which is
+equivalent to:
+
+    border: 1px solid black;
+
+So, if I want to apply the bblack1 CSS rule to all images
+in a WebObject, I do this:
+
+    images_css 'bblack1'
+
+Past that point all images on that particular web-object
+will have a 1px black border.
+
+See the example file at 
+<b>cyberweb/examples/advanced/images/global_css_rules_for_the_images.cgi</b>
+for a demo in this regard. (Not all images work; some of them
+are only available on my home system, but the other images
+should work.) 
+
+## links.md
+
+If a file called <b>links.md</b> exists in the current working directory
+then a .cgi or sinatra application powered by cyberweb will read in the
+content of this file. Then it will display each entry in that file
+as a HTML hyperlink. I needed this functionality so that I can dynamically
+modify links displayed on a webpage, for another user of the cyberweb
+gem. So this functionality may not be hugely important for most users,
+but in case you need it, it is available.
+
+## CSS Animations
+
+CSS Animations are defined by keyframes.
+
+Typically two transitions use used here:
+
+- The keyframe for the starting value.
+- The keyframe for the ending value.
+
+The general syntax goes like this:
+
+    @keyframes name_here {
+    }
+
+## Useful quotes when designing websites and web-apps
+
+The following subsection collects a few <b>interesting statements</b> -
+kind of "<i>the poor man's wisdom</i>" when it comes to web-development
+and software engineering in general. Do not take any of these
+at face-value 1:1 but feel free to use any of them them as a
+starting point for **gaining new insights**.
+
+"Any <b>good-enough</b> decision that can be made right now is
+still better than any 'perfect' decision that may come in
+way too late."
+ 
+"When you are creating a website, the primary goal as a designer
+should be to get rid of the question marks users have when 
+visiting that site."
+
+"The most important thing a designer can do is to understand
+the basic principle of eliminating question marks that a user
+has when visiting a website. Keep things simple."
+
+"If you can not make something self-evident, you should at the
+least make it self-explanatory."
+
+"If a web page is going to be effective, it has to work most
+of its beautiful magic at a single glance."
+
+"The average visitor rarely spends much time reading all 
+content on a given web page, so focus on designing fewer
+elements that can be easily navigated, without too much
+distracting clutter."
+
+"If your design forces a visitor to incur a small learning 
+curve, make sure that the added value from this design 
+change leads to it being worth that additional learning 
+curve."
+
+"Clarity trumps consistency."
+
+"Each webpage should have a clear visual hierarchy."
+
+"Components in a webpage that are related logically
+should also be related visually."
+
+"In order to make a website 'scan-friendly', make good use of
+headings having a larger font size. The headings should 
+indicate what a subsection is about."
+
+"When using a heading, make them visually somewhat closer
+to the section they belong to, rather than equally spaced
+to the preceding paragraph."
+
+"If you need the visitor to make a difficult choice, provide as
+much guidance as necessary - but not more. Be succinct here
+and provide only the smallest amount of information that
+will help the user."
+
+"Omit needless words. Vigorous writing is concise."
+
+"Try to make everything on a web-site self-explanatory or as
+close to it as possible."
+
+"Navigation should ideally remain clear, simple, and consistent."
+
+"It may be useful to consider using an identifier, such as a logo
+or an image, for the website, and display this e. g. on the
+upper left corner. This may help visitors identify where they
+are, in particular if they tend to use several tabs in their
+browser."
+
+"If your website makes use of a menu-bar or navigation-bar, 
+consider highlighting the current location that the user
+has or uses on that website."
+
+"Ideally a website should convey the big picture, and make it
+clear what the site is about."
+
+"If possible consider to use visual identifiers on the
+whole web-application at hand, to give visitors the
+right idea about this being a cohesive and integrated
+unit."
+
+"Changing a website at a later time is not necessarily trivial.
+Some percentage of users that have grown accustomed to a 
+layout will resist almost any kind of change, and even
+apparently simple changes often turn out to have
+far-reaching effects."
+
+"Focus ruthlessly on fixing the most serious problems first."
+
+"Make the best decision you can with the information you have."
+
+## Useful Links
+
+This subsection just keeps a few useful resources. This may become
+obsolete over time, so don't expect all links to work or be very
+useful. It's just a random collection really, last updated in
+**May 2021**.
+
+[https://validator.w3.org/](https://validator.w3.org/)
+
+[https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Auswahllisten](https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/Auswahllisten)
+
+https://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF
+
+https://meiert.com/en/indices/css-properties/
+
+https://webdesignerwall.com/tutorials/advanced-css-menu
+
+http://www.ericmeyeroncss.com/projects/01/
+
+http://www.selfhtml5.org/html5-tag-systematik/
+
+https://hyperstack.org/
+
+Fancy CSS Tricks and Hints:
+
+CSS-text effects: https://dev.to/gscode/10-cool-css-text-effects-3elk
+
+Various CSS Tricks: https://catswhocode.com/css-tricks/
 
-HTML Tutorial (HTML for beginners): https://html.com/
+HTML Tutorial (HTML for beginners): [HTML Tutorial (HTML for beginners)](https://html.com/)
 
-Self-HTML: https://selfhtml.org/
+Self-HTML: [Self-HTML](https://selfhtml.org/)
 
-Fancy Scrollbars: http://www.n-son.com/scripts/jsScrolling/example2.html
+Fancy Scrollbars: [Fancy Scrollbars](http://www.n-son.com/scripts/jsScrolling/example2.html)
 
 For a quick list (a table) of available HTML tags, you may want to visit: