cyberweb 0.4.174 → 0.5.225

data/lib/cyberweb/web_object/html_tags.rb

@@ -0,0 +1,1433 @@
+#!/usr/bin/ruby -w
+# Encoding: UTF-8
+# frozen_string_literal: true
+# =========================================================================== #
+# This file will also include close-tags. Congregate methods such as
+# input_field() - which is actually input() - are allowed to reside in
+# this file as well.
+# =========================================================================== #
+# require 'cyberweb/web_object/html_tags.rb'
+# =========================================================================== #
+require 'cyberweb/base/base.rb'
+
+module Cyberweb
+
+class WebObject < ::Cyberweb::Base # === Cyberweb::WebObject
+
+  # ========================================================================= #
+  # === button                                                   (button tag)
+  #
+  # This method will "generate" a HTML button. Since as of October 2022
+  # this uses its own HTML element; before that input(:button) was in
+  # use.
+  #
+  # The following example shows how this method could be used:
+  #
+  #   button {{
+  #     text: 'Hey there!'
+  #   }}
+  #
+  # A slightly more advanced example is the following variant:
+  #
+  #   button {{
+  #     text: 'Hey there - with more css and a Hello World alert-box in javascript when clicked by the user!',
+  #     css_class: 'bblack1 darkgreen pad8px BOLD',
+  #     javascript_function: 'msg("Hello world!!!")'
+  #   }}
+  #
+  # Here is another variant, by specifically responding to a click-event, to call a specific function:
+  #
+  #   button {{
+  #     text:           'Click here'
+  #     css_class:      'bblack1 pad8px'
+  #     on_click_event: :on_click_event_hello_world
+  #   }}
+  #
+  # And another variant, without a block:
+  #
+  #   button text: 'OK!',
+  #          css_class: 'glow_on_hover'
+  #
+  # ========================================================================= #
+  def button(
+      optional_text      = '',
+      optional_css_class = '',
+      &block
+    )
+    _ = ::HtmlTags.button(
+      optional_text,
+      optional_css_class,
+      &block
+    )
+    addnl(_)
+  end
+
+  require 'cyberweb/html_tags/input.rb'
+  # ========================================================================= #
+  # === input                                                     (input tag)
+  #
+  # HTML defines the following input-types:
+  #
+  #   <input type="text">      Displays a single-line text input field
+  #   <input type="radio">     Displays a radio button (for selecting one of many choices)
+  #   <input type="checkbox">  Displays a checkbox (for selecting zero or more of many choices)
+  #   <input type="submit">    Displays a submit button (for submitting the form)
+  #   <input type="button">    Displays a clickable button
+  #
+  # A button would look like this:
+  #
+  #   button = input(:button)
+  #
+  # A form may look like this:
+  #
+  #   input_submit css_class: 'bblack1'
+  #
+  # ========================================================================= #
+  def input(
+      type          = :submit,    # (1) type
+      default_value = '',         # (2) default value
+      css_class     = Input.to_s, # (3) css class
+      name_to_use   = '',         # (4) name to use
+      css_style     = '',         # (5) css style
+      accesskey     = '',         # (6) accesskey
+      my_javascript = '',         # (7) javascript
+      id            = nil,        # (8) id
+      hash          = {},         # (9) an additional hash
+      &block
+    )
+    case css_class
+    # ======================================================================= #
+    # === :default
+    # ======================================================================= #
+    when :default
+      css_class = Input.to_s
+    end
+    _ = ''.dup
+    # ======================================================================= #
+    # First, let's start to assemble our main string that we will return.
+    # This must come before we handle anything else.
+    # ======================================================================= #
+    _ << '<input'
+    # ======================================================================= #
+    # === Handle blocks next, if given
+    #
+    # Check for block-supplied to the method. Note that this must come
+    # before the call to return_css_class(), as the blocks passed into
+    # this method may also modify the css-class in use.
+    # ======================================================================= #
+    if block_given?
+      yielded = yield # yield the block here.
+      case yielded
+      # ===================================================================== #
+      # === :select_on_click
+      # ===================================================================== #
+      when :select_on_click
+        my_javascript = :select_on_click
+      # ===================================================================== #
+      # === :is_checked
+      #
+      # This variant is specifically for HTML checkboxes.
+      # ===================================================================== #
+      when :is_checked
+        _ << ' checked="checked"'
+      else
+        # =================================================================== #
+        # Handle Hashes next
+        # =================================================================== #
+        if yielded.is_a? Hash
+          # ================================================================= #
+          # === :css_class
+          #
+          # Handle situations like the following:
+          #
+          #   input_submit {{ css_class: 'bblack1' }}
+          #
+          # ================================================================= #
+          if yielded.has_key? :css_class
+            css_class = yielded.delete(:css_class)
+          end
+          # ================================================================= #
+          # === :javascript_function
+          #
+          # This variant is for invoking a javascript-function.
+          #
+          # A simple example for this is the following:
+          #
+          #   javascript_function: 'msg("hello_world")'
+          #
+          # ================================================================= #
+          if yielded.has_key? :javascript_function
+            string = yielded.delete(:javascript_function).dup
+            if string.include? '(' # Assume something like: msg("hello_world")
+              splitted = string.split('(')
+              function_to_call = splitted.first.to_s
+              argument_to_use  = splitted[1 .. -1].join('(').
+                                 delete('()').to_s.delete('"')
+              case function_to_call
+              when 'msg'
+                _ << '  onclick="window.alert(\''+argument_to_use+'\');"'
+              end
+            end
+          # ================================================================= #
+          # === :on_click_event
+          # ================================================================= #
+          elsif yielded.has_key? :on_click_event
+            _ << ' onclick="'+yielded.delete(:on_click_event).to_s+'()"'
+          end
+          # ================================================================= #
+          # === :text
+          #
+          # Handle situations like the following:
+          #
+          #   input_submit {{ text: 'submit' }}
+          #
+          # ================================================================= #
+          if yielded.has_key? :text
+            default_value = yielded.delete(:text)
+          end
+        end
+      end
+    end
+    # ======================================================================= #
+    # === Handle Hashes next, for the variable default_value
+    #
+    # Second, let's check if the second argument is a hash. We have to be
+    # careful here: if the Hash contains a key called :text, then this
+    # must be evaluated last.
+    # ======================================================================= #
+    if default_value.is_a? Hash
+      # ===================================================================== #
+      # === :css_class
+      # ===================================================================== #
+      if default_value.has_key? :css_class
+        css_class = default_value.delete(:css_class)
+      end
+      # ===================================================================== #
+      # === :accesskey
+      # ===================================================================== #
+      if default_value.has_key? :accesskey
+        accesskey = default_value[:accesskey]
+      end
+      # ===================================================================== #
+      # === :id
+      #
+      # Handle the :id entry. This will become id="" in HTML.
+      # ===================================================================== #
+      if default_value.has_key? :id
+        id = default_value[:id].to_s # Keep it as a String.
+      end
+      # ===================================================================== #
+      # === :name
+      # ===================================================================== #
+      if default_value.has_key? :name
+        name_to_use = default_value.delete(:name)
+      end
+      # ===================================================================== #
+      # === :text
+      #
+      # This should come last, or at the least very late.
+      # ===================================================================== #
+      if default_value.has_key? :text
+        default_value = default_value.delete(:text)
+      end
+      if default_value.is_a?(Hash) and default_value.empty?
+        default_value = 'Submit'
+      end
+    end
+    case type.to_sym # case tag
+    # ======================================================================= #
+    # === :radio
+    #
+    # This variant will display a radio button. A radio button can be used
+    # for selecting one of many choices.
+    # ======================================================================= #
+    when :radio
+      _ << ' type="radio"'
+    # ======================================================================= #
+    # === :checkbox
+    # ======================================================================= #
+    when :checkbox
+      _ << ' type="checkbox"'
+    # ======================================================================= #
+    # === :datetime
+    # ======================================================================= #
+    when :datetime
+      _ << ' type="datetime-local"'
+    # ======================================================================= #
+    # === :month
+    # ======================================================================= # 
+    when :month
+      _ << ' type="month"'
+    # ======================================================================= #
+    # === :week
+    # ======================================================================= #
+    when :week
+      _ << ' type="week"'
+    # ======================================================================= #
+    # === :image
+    # ======================================================================= #
+    when :image, :img, :i
+      _ << ' type="image"'
+    # ======================================================================= #
+    # === :button
+    # ======================================================================= #
+    when :button,      :b
+      _ << ' type="button"'
+    # ======================================================================= #
+    # === :hidden
+    # ======================================================================= #
+    when :hidden,      :h
+      _ << ' type="hidden"'
+    # ======================================================================= #
+    # === :submit
+    # ======================================================================= #
+    when :submit,      :s
+      _ << ' type="submit"'
+    # ======================================================================= #
+    # === :reset
+    # ======================================================================= #
+    when :reset,       :r
+      _ << ' type="reset"'
+    # ======================================================================= #
+    # === :text
+    # ======================================================================= #
+    when :text, :field, :default, :t
+      _ << ' type="text"'
+    # ======================================================================= #
+    # === :file
+    # ======================================================================= #
+    when :file,
+         :file_uploads,
+         :upload,
+         :file_dialogue,
+         :f,
+         :file_handle  # File uploads are handled here.
+      _ << ' type="file"'
+      id = 'input_file_upload' if id.nil?
+    else
+      _ = type.to_s+' was not found ...'+NL
+    end
+    # ======================================================================= #
+    # Next, handle Symbol input given to css_class.
+    #
+    # This can be a Symbol such as:
+    #
+    #   :select_on_click
+    #
+    # or such as:
+    #
+    #   :focus_with_deepskyblue_background
+    #
+    # ======================================================================= #
+    if css_class.is_a? Symbol
+      case css_class # case tag
+      when :select_on_click
+        css_class = Input.to_s
+        if my_javascript.empty? # If it is empty then we can populate it.
+          my_javascript = :select_on_click
+        end
+      else
+        # =================================================================== #
+        # The next line will handle cases such as:
+        #   :focus_with_yellow_background
+        # =================================================================== #
+        if css_class.to_s.start_with? 'focus_with'
+          # ================================================================= #
+          # Delegate towards class InputFocus next.
+          # ================================================================= #
+          input_focus = ::Cyberweb::InputFocus.new(css_class)
+          add_css_style input_focus.string?
+          css_class = input_focus.css_class?.dup
+          # ================================================================= #
+          # Keep in mind that the user may have set a default value for
+          # a css class, via Input.set_css_class(). If this is the case
+          # then we have to honour this setting and will simply append it.
+          # ================================================================= #
+          unless ::Cyberweb::Input.to_s.empty?
+            css_class << N+Input.to_s.dup
+          end
+        end
+      end
+    end
+    _ = _.dup if _.frozen?
+    _ << css_class_or_no_class(css_class.to_s)
+    _ << css_style_or_no_style(css_style)
+
+    if name_to_use.is_a? Symbol # This is copy/paste of the above.
+      case name_to_use
+      when :select_on_click
+        name_to_use = ''
+        if my_javascript.empty? # If it is empty then we can populate it.
+          my_javascript = :select_on_click
+        end
+      end
+    end
+    _ << return_the_name(name_to_use) unless name_to_use.to_s.empty?
+    _ << return_accesskey(accesskey)
+    if id
+      if id.is_a? String
+        _ << ' id="'+id.to_s+'"'
+      end
+    end
+    my_javascript = sanitize_javascript(my_javascript)
+    _ << " #{my_javascript}" unless my_javascript.empty?
+    if default_value.is_a? Hash
+      if default_value.has_key? :value
+        _ << ' value="'+default_value[:value].to_s+'"'
+      end
+    else
+      unless _.include?('value') 
+        unless default_value.to_s.empty? # then add our default value
+          _ << ' value="'+default_value.to_s+'"'
+        end
+      end
+    end
+    # ======================================================================= #
+    # Next handle a possible hash-argument here.
+    # ======================================================================= #
+    if hash.is_a? Hash
+      _ << ' size="'+hash[:size].to_s+'"' if hash[:size]
+      _ << ' maxlength="'+hash[:max_length].to_s+'"' if hash[:max_length]
+    end
+    _ << ' />'+NL
+    addnl(_)
+  end
+
+  # ========================================================================= #
+  # === legend
+  # ========================================================================= #
+  def legend(
+      content            = '',
+      optional_css_class = '',
+      optional_the_id    = '',
+      optional_css_style = '',
+      &block
+    )
+    addn(
+      '<legend'+
+      css_class_or_no_class(optional_css_class)+
+      id_or_no_id(optional_the_id)+
+      css_style_or_no_style(optional_css_style)+
+      '>'
+    )
+    addnl(content)
+    if block_given?
+      yield
+      clegend
+    end
+  end
+
+  # ========================================================================= #
+  # === tr
+  #
+  # This method will create a <tr> tag.
+  # ========================================================================= #
+  def tr
+    addnl(
+      '<tr>'
+    )
+    if block_given?
+      yield
+      ctr
+    end
+  end
+
+  # ========================================================================= #
+  # === return_details
+  #
+  # This will return a <details> tag.
+  # ========================================================================= #
+  def return_details(
+      i                   = '',
+      optional_css_class  = '',
+      optional_the_id     = '',
+      optional_css_style  = '',
+      optional_javascript = '',
+      &block
+    )
+    result = HtmlTags.details(
+      i,
+      optional_css_class,
+      optional_the_id,
+      optional_css_style,
+      &block
+    )
+    return result
+  end
+  
+  # ========================================================================= #
+  # === details
+  #
+  # This will return a <details> tag.
+  # ========================================================================= #
+  def details(
+      i                   = '',
+      optional_css_class  = '',
+      optional_the_id     = '',
+      optional_css_style  = '',
+      optional_javascript = '',
+      &block
+    )
+    addnl(
+      return_details(
+        i,
+        optional_css_class,
+        optional_the_id,
+        optional_css_style,
+        optional_javascript,
+        &block
+      )
+    )
+  end
+
+  # ========================================================================= #
+  # === h3                                                           (h3 tag)
+  # ========================================================================= #
+  def h3(
+      i                   = '',
+      optional_css_class  = '',
+      optional_the_id     = '',
+      optional_css_style  = '',
+      optional_javascript = '',
+      &block
+    )
+    addn(
+      HtmlTags.h3(
+        i,
+        optional_css_class,
+        optional_the_id,
+        optional_css_style,
+        &block
+      )
+    )
+  end
+
+  # ========================================================================= #
+  # === input_file
+  # ========================================================================= #
+  def input_file(
+      default_value = '',         # (2) default value
+      css_class     = Input.to_s, # (3) css class
+      name_to_use   = '',         # (4) name to use
+      css_style     = '',         # (5) css style
+      accesskey     = '',         # (6) accesskey
+      my_javascript = '',         # (7) javascript
+      id            = nil,        # (8) id
+      hash          = {},         # (9) an additional hash
+      &block
+    )
+    input(
+      :file,
+      default_value,
+      css_class,
+      name_to_use,
+      css_style,
+      accesskey,
+      my_javascript,
+      id,
+      hash,
+      &block
+    )
+  end; alias input_type_file input_file # === input_type_file
+
+  # ========================================================================= #
+  # === h2                                                           (h2 tag)
+  # ========================================================================= #
+  def h2(
+      i                   = '',
+      optional_css_class  = '',
+      optional_the_id     = '',
+      optional_css_style  = '',
+      optional_javascript = ''
+    )
+    addn(
+      HtmlTags.h2(
+        i,
+        optional_css_class,
+        optional_the_id,
+        optional_css_style
+      )
+    )
+  end
+
+  # ========================================================================= #
+  # === input_field
+  #
+  # This is essentially a wrapper over <input type="text">.
+  #
+  # Usage example:
+  #
+  #   input_field('','bblack1 pad8px')
+  #
+  # ========================================================================= #
+  def input_field(
+      default_value = '',         # (1) default value
+      css_class     = Input.to_s, # (2) css class
+      name_to_use   = '',         # (3) name to use
+      css_style     = '',         # (4) css style
+      accesskey     = '',         # (5) accesskey
+      my_javascript = '',         # (6) javascript
+      id            = nil,        # (7) id
+      hash          = {}          # (8) an additional hash
+    )
+    input(
+      :text,
+      default_value,
+      css_class,
+      name_to_use,        
+      css_style,        
+      accesskey,        
+      my_javascript,        
+      id,       
+      hash
+    )
+  end; alias input_entry input_field # === input_entry
+
+  # ========================================================================= #
+  # === p                                                             (p tag)
+  #
+  # This method handles the creation of <p> tags ultimately.
+  # ========================================================================= #
+  def p(
+      optional_css_class = '',
+      the_id             = '',
+      optional_css_style = '',
+      &block
+    )
+    # ======================================================================= #
+    # === Handle Hashes next
+    # ======================================================================= #
+    if optional_css_class.is_a? Hash
+      # ===================================================================== #
+      # === :id
+      # ===================================================================== #
+      if optional_css_class.has_key? :id
+        the_id = optional_css_class.delete(:id)
+      end
+      # ===================================================================== #
+      # === :css_style
+      #
+      # Must come before :css_class.
+      # ===================================================================== #
+      if optional_css_class.has_key? :css_style
+        optional_css_style = optional_css_class.delete(:css_style)
+      end
+      # ===================================================================== #
+      # === :css_class
+      #
+      # Must come after :id.
+      # ===================================================================== #
+      if optional_css_class.has_key? :css_class
+        optional_css_class = optional_css_class.delete(:css_class)
+      # ===================================================================== #
+      # === :class
+      # ===================================================================== #
+      elsif optional_css_class.has_key? :class
+        optional_css_class = optional_css_class.delete(:class)
+      end
+      if optional_css_class.is_a?(Hash) and
+        optional_css_class.empty?
+        optional_css_class = ''
+      end
+    end
+    addn(
+      '<p'+
+      css_class_or_no_class(optional_css_class)+
+      id_or_no_id(the_id.to_s)+
+      css_style_or_no_style(optional_css_style)+
+      '>'
+    )
+    if block_given?
+      yield
+      addn('</p>')
+    end
+  end
+
+  # ========================================================================= #
+  # === ul                                                           (ul tag)
+  #
+  # ul stands for "unsorted list".
+  # ========================================================================= #
+  def ul(
+      optional_css_class = 'marl1em', # This is the default.
+      optional_the_id    = '',
+      &block
+    )
+    # ======================================================================= #
+    # === First we will handle Hashes
+    # ======================================================================= #
+    if optional_css_class.is_a? Hash
+      # ===================================================================== #
+      # === :id
+      # ===================================================================== #
+      if optional_css_class.has_key? :id
+        optional_the_id = optional_css_class.delete(:id)
+        optional_css_class = 'marl1em' if optional_css_class.empty?
+      end
+    end
+    addnl(
+      '<ul class="'+optional_css_class.to_s+'"'+
+      id_or_no_id(optional_the_id)+
+      '>'
+    )
+    if block_given?
+      yield
+      cul
+    end
+  end
+
+  # ========================================================================= #
+  # === checked_checkbox
+  # ========================================================================= #
+  def checked_checkbox(
+      # hash = { name: 'valid_ninja' }
+      hash = {}
+    )
+    name_to_use = ''
+    if hash.is_a? Hash
+      if hash.has_key? :name
+        name_to_use = hash[:name]
+      end
+    end
+    input_checkbox('', :default, name_to_use) { :is_checked }
+  end
+
+  # ========================================================================= #
+  # === input_checkbox
+  # ========================================================================= #
+  def input_checkbox(
+      default_value = '',         # (2) default value
+      css_class     = Input.to_s, # (3) css class
+      name_to_use   = '',         # (4) name to use
+      css_style     = '',         # (5) css style
+      accesskey     = '',         # (6) accesskey
+      my_javascript = '',         # (7) javascript
+      id            = nil,        # (8) id
+      hash          = {},         # (9) an additional hash
+      &block
+    )
+    input(
+      :checkbox,
+      default_value,
+      css_class,
+      name_to_use,
+      css_style,
+      accesskey,
+      my_javascript,
+      id,
+      hash,
+      &block
+    )
+  end
+
+  # ========================================================================= #
+  # === label_and_input_text
+  #
+  # This method essentially combines <label> and <input type="text">.
+  #
+  # Usage examples:
+  #
+  #  label_and_input_text :foobar
+  #  label_and_input_text :foobar, 'Age: '
+  #  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 {id: :foobar}, :middle_break
+  #
+  # ========================================================================= #
+  def label_and_input_text(
+      work_on_this_id    = '',
+      text_for_the_label = '',
+      *remaining_arguments # Store them in an Array.
+    )
+    use_a_new_line = false # Default.
+    # ======================================================================= #
+    # === Handle Hashes first
+    # ======================================================================= #
+    if work_on_this_id.is_a? Hash
+      if work_on_this_id.has_key? :id
+        work_on_this_id = work_on_this_id.delete(:id)
+      end
+    end
+    work_on_this_id = work_on_this_id.to_s
+    case text_for_the_label
+    # ======================================================================= #
+    # === :middle_break
+    # ======================================================================= #
+    when :middle_break,
+         :linebreak,
+         :br
+      use_a_new_line = true
+      text_for_the_label = ''
+    end
+    ee '<label for="'+work_on_this_id+'">'+text_for_the_label+'</label>'
+    br if use_a_new_line
+    ee '<input type="text" id="'+work_on_this_id+'" name="'+work_on_this_id+'">'
+  end
+
+  # ========================================================================= #
+  # === input_submit
+  #
+  # This is essentially a submit-button, in HTML.
+  #
+  # The first argument is the text that should be used for that button.
+  # ========================================================================= #
+  def input_submit(
+      default_value = '',
+      css_class     = Input.to_s,
+      name_to_use   = '',
+      css_style     = '',
+      accesskey     = '',
+      my_javascript = '',
+      id            = nil,
+      hash          = {},
+      &block
+    )
+    input(
+      :submit,
+      default_value,
+      css_class,
+      name_to_use,
+      css_style,
+      accesskey,
+      my_javascript,
+      id,
+      hash,
+      &block
+    )
+  end
+
+  # ========================================================================= #
+  # === input_radio
+  # ========================================================================= #
+  def input_radio(
+      default_value = '',         # (2) default value
+      css_class     = Input.to_s, # (3) css class
+      name_to_use   = '',         # (4) name to use
+      css_style     = '',         # (5) css style
+      accesskey     = '',         # (6) accesskey
+      my_javascript = '',         # (7) javascript
+      id            = nil,        # (8) id
+      hash          = {},         # (9) an additional hash
+      &block
+    )
+    input(
+      :radio,
+      default_value,
+      css_class,
+      name_to_use,
+      css_style,
+      accesskey,
+      my_javascript,
+      id,
+      hash,
+      &block
+    )
+  end
+
+  # ========================================================================= #
+  # === form                                                       (form tag)
+  #
+  # Usage example:
+  #
+  #   form 'SELF', :post, 'mars2em'
+  #
+  # ========================================================================= #
+  def form(
+      action         = 'SELF',    # (1) action
+      method_form    = Form.mode, # (2) method form, such as :get or :post
+      css_class      = Form.to_s, # (3) css class
+      the_id         = '',        # (4) the id
+      css_style      = '',        # (5) css style
+      accept_charset = nil,       # (6) charset
+      enctype        = nil
+    )
+    if action.is_a? Hash
+      if action.has_key? :action
+        _ = action[:action]
+        case _
+        when :self
+          action = return_program_name
+        end
+      end
+    end
+    case action
+    when /SELF/i
+      action = return_program_name
+    end
+    _ = '<form'.dup
+    _ << ' action="'+action.to_s+'"'
+    _ << ' method="'+method_form.to_s+'"'
+    _ << css_class_or_no_class(css_class.to_s).to_s
+    _ << id_or_no_id(the_id.to_s).to_s
+    _ << css_style_or_no_style(css_style)
+    _ << ">\n" # Close the <form> tag here.
+    addnl(_)
+    if block_given?
+      yield
+      cform
+    end
+  end
+
+  # ========================================================================= #
+  # === h1
+  # ========================================================================= #
+  def h1(
+      i                   = '',
+      optional_css_class  = '',
+      optional_the_id     = '',
+      optional_css_style  = '',
+      optional_javascript = ''
+    )
+    addnl(
+      string_h1(
+        i, optional_css_class, optional_the_id, optional_css_style
+      )
+    )
+  end
+
+  # ========================================================================= #
+  # === h4
+  # ========================================================================= #
+  def h4(
+      i                   = '',
+      optional_css_class  = '',
+      optional_the_id     = '',
+      optional_css_style  = '',
+      optional_javascript = ''
+    )
+    addn(
+      HtmlTags.h4(i, optional_css_class, optional_the_id, optional_css_style)
+    )
+  end
+
+  # ========================================================================= #
+  # === h5
+  # ========================================================================= #
+  def h5(
+      i                   = '',
+      optional_css_class  = '',
+      optional_the_id     = '',
+      optional_css_style  = '',
+      optional_javascript = ''
+    )
+    addn(
+      HtmlTags.h5(i, optional_css_class, optional_the_id, optional_css_style)
+    )
+  end
+
+  # ========================================================================= #
+  # === h6
+  # ========================================================================= #
+  def h6(
+      i                   = '',
+      optional_css_class  = '',
+      optional_the_id     = '',
+      optional_css_style  = '',
+      optional_javascript = ''
+    )
+    addn(
+      HtmlTags.h6(i, optional_css_class, optional_the_id, optional_css_style)
+    )
+  end
+
+  # ========================================================================= #
+  # === area
+  #
+  # This does an area on an image. DO NOT FORGET TO USE usemap IN YOUR IMAGE!
+  #
+  # The coords for rect are:
+  #
+  #   left, top, right, bottom
+  #
+  # (Die Ecke oben links: x1, y1, und die Ecke unten rechts: x2, y2) 
+  # for circ they are: centerx,centery,radius
+  # for poly they are: x1,y1,x2,y2,..,xn,yn
+  #
+  # Usage Examples:
+  #
+  #   area :rect, '242'
+  #
+  # ========================================================================= #
+  def area(
+      shape       = :rect,
+      coords      = '92,39,104,140',
+      href_to_use = ''
+    )
+    addnl(
+      '<area shape="'+shape.to_s+'" coords="'+coords+'" href="'+href_to_use+'"/>'
+    )
+  end
+
+  # ========================================================================= #
+  # === quote
+  # ========================================================================= #
+  def quote(
+      text,
+      css_class = '',
+      the_id    = '',
+      css_style = ''
+    )
+    addnl(
+      ::Cyberweb.quote(text, css_class, the_id, css_style)
+    )
+  end
+
+  # ========================================================================= #
+  # === td
+  #
+  # This method will ultimately yield a <td>CONTENT_HERE</td> String.
+  #
+  #   td(content, optional_css_class, optional_the_id)
+  #
+  # ========================================================================= #
+  def td(
+      content            = '',
+      optional_css_class = '',
+      optional_the_id    = ''
+    )
+    addnl(
+      '<td'+
+      css_class_or_no_class(optional_css_class)+
+      id_or_no_id(optional_the_id)+
+      '>'
+    )
+    if block_given?
+      addnl(yield)
+    else
+      addnl(content)
+    end
+    ctd
+  end
+
+  # ========================================================================= #
+  # === select                                                (selection tag)
+  #
+  # This method makes a <select> tag.
+  #
+  # In raw HTML, this may look like so:
+  #
+  #   <select>
+  #     <option value="volvo">Volvo</option>
+  #     <option value="saab">Saab</option>
+  #     <option value="opel">Opel</option>
+  #     <option value="audi">Audi</option>
+  #   </select>
+  #
+  # It is recommended to use a name="" label for the <select> tag,
+  # such as in:
+  #
+  # For documentation, see this link:
+  #
+  #   https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select
+  #
+  # ========================================================================= #
+  def select(
+      css_class  = '',
+      the_id     = '',
+      css_style  = '',
+      javascript = ''
+    )
+    add_newline
+    the_tag = string_tag(
+      :select,
+      css_class,
+      the_id,
+      css_style,
+      javascript
+    )
+    add_newline
+    string_that_is_to_be_displayed = ''.dup
+    # ======================================================================= #
+    # === Handle blocks next
+    # ======================================================================= #
+    if block_given?
+      yielded = yield
+      # ===================================================================== #
+      # === And now, we will handle Hashes:
+      # ===================================================================== #
+      if yielded.is_a? Hash
+        # =================================================================== #
+        # === :dataset_to_use
+        # =================================================================== #
+        if yielded.has_key? :dataset_to_use
+          yielded[:dataset_to_use].each {|content|
+            # =============================================================== #
+            # Append this onto the content-string next:
+            # =============================================================== #
+            string_that_is_to_be_displayed <<
+              "<option value=\"#{content.downcase}\">#{content}</option>\n"
+          }
+        end
+        # =================================================================== #
+        # === :css_class
+        # =================================================================== #
+        if yielded.has_key? :css_class
+          the_tag[-2,0] = ' class="'+yielded.delete(:css_class)+'"'
+        end
+        # =================================================================== #
+        # === :name
+        # =================================================================== #
+        if yielded.has_key? :name
+          the_tag[-2,0] = ' name="'+yielded.delete(:name)+'"'
+        end
+      end
+    end
+    # ======================================================================= #
+    # Next display our <select> tag:
+    # ======================================================================= #
+    addn the_tag
+    addn string_that_is_to_be_displayed
+    addn sclose(:select)
+  end; alias selection select # === selection
+
+  # ========================================================================= #
+  # === html                                                       (html tag)
+  # ========================================================================= #
+  def html(
+      &block
+    )
+    addn(
+      '<html>'
+    )
+    if block_given?
+      yield
+      addn('</html>')
+    end
+  end
+
+  # ========================================================================= #
+  # === th
+  #
+  # This method will yield the <th> tag, ultimately.
+  # ========================================================================= #
+  def th(
+      optional_input = ''
+    )
+    _ = '<th'.dup
+    case optional_input
+    when :left
+      _ << 'align="left"'
+    when :right
+      _ << 'align="right"'
+    end
+    _ << '>'
+    add(_)
+  end
+
+  # ========================================================================= #
+  # === div                                                         (div tag)
+  #
+  # Input to this method can be in this format:
+  #
+  #   div(id: 'drag_div_sitemap_table', css_style: 'z-index: 1') {
+  #
+  # So the first argument can be a Hash.
+  # ========================================================================= #
+  def div(
+      optional_css_class  = '',
+      optional_the_id     = '',
+      optional_css_style  = '',
+      optional_javascript = '',
+      &block
+    )
+    if optional_css_class.is_a? Hash
+      # ===================================================================== #
+      # === :css_style
+      # ===================================================================== #
+      if optional_css_class.has_key? :css_style
+        optional_css_style = optional_css_class.delete(:css_style)
+      end
+      # ===================================================================== #
+      # === :id
+      # ===================================================================== #
+      if optional_css_class.has_key? :id
+        optional_the_id = optional_css_class.delete(:id)
+      end
+      # ===================================================================== #
+      # === :css_class
+      # ===================================================================== #
+      if optional_css_class.has_key? :css_class
+        optional_css_class = optional_css_class.delete(:css_class)
+      # ===================================================================== #
+      # === :class
+      # ===================================================================== #
+      elsif optional_css_class.has_key? :class
+        optional_css_class = optional_css_class.delete(:class)
+      end
+      if optional_css_class.is_a? Hash
+        optional_css_class = ''
+      end
+    end
+    # ======================================================================= #
+    # We need to delegate to a toplevel method, in order to create
+    # the correct <div> tag.
+    # ======================================================================= # 
+    addnl(
+      Cyberweb.string_div(
+        optional_css_class,
+        optional_the_id,
+        optional_css_style,
+        optional_javascript
+      )
+    )
+    # ======================================================================= #
+    # === Handle blocks given to <div> next
+    # ======================================================================= #
+    if block_given?
+      yield
+      cdiv
+    end
+  end
+
+  # ========================================================================= #
+  # === li                                                           (li tag)
+  #
+  # This method should ultimately generate a String such as:
+  #
+  #   <li>foobar</li>
+  #
+  # ========================================================================= #
+  def li(
+      content             = '',
+      optional_css_class  = '',
+      optional_the_id     = '',
+      optional_css_style  = '',
+      optional_javascript = '',
+      &block
+    )
+    # ======================================================================= #
+    # First, always add the <li> tag, whenever li() is called.
+    # ======================================================================= #
+    addnl(
+      '<li'+
+      css_class_or_no_class(optional_css_class.dup)+
+      id_or_no_id(optional_the_id.to_s.dup)+
+      css_style_or_no_style(optional_css_style.dup)+
+      '>'
+    )
+    addnl(content.dup) if content and !content.empty?
+    # ======================================================================= #
+    # === Handle blocks given to this method next
+    # ======================================================================= #
+    if block_given?
+      addnl(yield)
+      cli
+    end
+  end
+
+  # ========================================================================= #
+  # === textarea
+  #
+  # This create a <textarea> tag.
+  #
+  # Example:
+  #
+  #   textarea('foobar','bblack1 pad1em','textarea_id')
+  #
+  # ========================================================================= #
+  def textarea(
+      default_content = '', # 1) content
+      css_class       = '', # 2) css-class
+      the_id          = '', # 3) the id
+      css_style       = '', # 4) css_style
+      n_cols          = 25, # 5) n columns
+      n_rows          = 8,  # 6) n rows
+      javascript      = '', # 7) javascript
+      name            = '', # 8) name
+      &block
+    )
+    addnl(
+      ::Cyberweb.string_textarea(
+        default_content,
+        css_class,
+        the_id,
+        css_style,
+        n_cols,
+        n_rows,
+        javascript,
+        name,
+        &block
+      )
+    )
+  end; alias string_textarea textarea # === string_textarea
+       alias textview        textarea # === textview
+       alias add_write_area  textarea # === add_write_area
+
+  # ========================================================================= #
+  # === ctextarea
+  # ========================================================================= #
+  def ctextarea
+    close(:textarea)
+  end
+
+  # ========================================================================= #
+  # === cbody
+  # ========================================================================= #
+  def cbody
+    close(:body)
+  end
+
+  # ========================================================================= #
+  # === cframeset
+  # ========================================================================= #
+  def cframeset
+    close(:frameset)
+  end
+
+  # ========================================================================= #
+  # === cul
+  # ========================================================================= #
+  def cul
+    close(:ul)
+  end
+
+  # ========================================================================= #
+  # === cli
+  # ========================================================================= #
+  def cli
+    close(:li)
+  end
+
+  # ========================================================================= #
+  # === blockquote
+  #
+  # For documentation about this HTML tag, have a look at:
+  #
+  #   https://www.w3schools.com/tags/tag_blockquote.asp
+  #
+  # ========================================================================= #
+  def blockquote(
+      i                  = '',
+      optional_css_class = ''
+    )
+    addn(
+      '<blockquote class="'+optional_css_class.to_s+'">'+i+'</blockquote>'
+    )
+  end
+
+  # ========================================================================= #
+  # === fieldset
+  #
+  # This will generate a HTML <fieldset> tag.
+  #
+  # You can pass in a Hash, which allows us to do things like this here:
+  #
+  #   fieldset style: 'width: 70%'
+  #
+  # ========================================================================= #
+  def fieldset(
+      optional_css_class  = Fieldset.to_s,
+      optional_the_id     = '',
+      optional_css_style  = '',
+      optional_javascript = ''
+    )
+    if optional_css_class.is_a? Hash
+      if optional_css_class.has_key? :style
+        optional_css_style = optional_css_class[:style]
+        optional_css_class = ''
+      end
+    end
+    ee stag(:fieldset, optional_css_class, optional_the_id, optional_css_style, optional_javascript)
+      yield if block_given?
+    cfieldset
+  end
+
+  # ========================================================================= #
+  # === ctable
+  # ========================================================================= #
+  def ctable
+    close(:table)
+  end
+
+  # ========================================================================= #
+  # === clabel
+  # ========================================================================= #
+  def clabel
+    close(:label)
+  end
+
+  # ========================================================================= #
+  # === cdiv
+  # ========================================================================= #
+  def cdiv
+    close(:div)
+  end
+
+  # ========================================================================= #
+  # === close                                                     (close tag)
+  # ========================================================================= #
+  def close(i)
+    addn(
+      sclose(i)
+    )
+  end; alias c close # === c
+
+  # ========================================================================= #
+  # === cp
+  # ========================================================================= #
+  def cp
+    close(:p)
+  end
+
+  # ========================================================================= #
+  # === table
+  # ========================================================================= #
+  def table(
+      optional_css_class = '',
+      optional_the_id    = '',
+      optional_css_style = ''
+    )
+    addnl(
+      '<table'+
+      css_class_or_no_class(optional_css_class)+
+      id_or_no_id(optional_the_id)+
+      css_style_or_no_style(optional_css_style)+
+      '>'
+    )
+  end
+
+  # ========================================================================= #
+  # === close_a
+  # ========================================================================= #
+  def close_a
+    addn('</a>')
+  end; alias ca close_a # === ca
+
+  # ========================================================================= #
+  # === cselect
+  # ========================================================================= #
+  def cselect
+    close(:select)
+  end
+
+  # ========================================================================= #
+  # === cpre
+  # ========================================================================= #
+  def cpre
+    close(:pre)
+  end
+
+  # ========================================================================= #
+  # === clegend
+  # ========================================================================= #
+  def clegend
+    close(:legend)
+  end
+
+  # ========================================================================= #
+  # === cobject
+  # ========================================================================= #
+  def cobject
+    close(:object)
+  end
+
+  # ========================================================================= #
+  # === cmap
+  # ========================================================================= #
+  def cmap
+    close(:map)
+  end
+
+end; end