==============================================================================================
KURZE HINWEISE - SEITENBESCHREIBUNGSSPRACHE HTML5 UND CSS
==============================================================================================

Um die nachfolgenden Hinweise fuer die Erstellung von HTML5-Webseiten anwenden zu koennen,
sind Grundkenntnisse im Aufbau von Webseiten, von HTML-Tags und CSS nicht nur empfehlenswert
sondern auch notwendig. Der spezielle Status der HTML-Datei index.htm oder index.html
sollte bekannt sein.

HTML5 ... Hypertext Markup Language oder textbasierte Auszeichnungssprache fuer die
          strukturierte Darstellung von Texten, Grafiken und Hyperlinks in HTML-Dokumenten
CSS3 ... Cascading Style Sheets; Mithilfe von CSS werden Regeln fuer die Gestaltung der
         Inhalte von HTML-Elementen erstellt. CSS ermoeglicht also die Trennung von Struktur
         (Aufgabe von HTML) und Gestaltung (Aufgabe von CSS) eines HTML-Dokuments.


INHALTSVERZEICHNIS

01: ALLGEMEINES
02: GRUNDSAETZLICHER AUFBAU EINES HTML-DOKUMENTS
03: BOX-MODELL
03.1: WEBSEITE MIT 5 BOXEN, NAVIGATION AUF DER LINKEN SEITE
03.2: WEBSEITE MIT 5 BOXEN, NAVIGATION AUF DER RECHTEN SEITE
03.3: WEBSEITE MIT 5 BOXEN, NAVIGATION OBEN
04: WEBSEITE MIT DOWNLOAD-TABELLE
05: WEBSEITE MIT IFRAME
06: BILDERGALERIE MITTELS IFRAME
07: WEBSEITE MIT BILDERN
08: WEBSEITE MIT VIDEOS (IFRAME)
09: WEBSEITE MIT AUDIO-DATEIEN (IFRAME)
10: WEBSEITE MIT BILDLINKS (JAVASKRIPT)
11: WEBSEITE MIT LINKS DIE UEBER JAVASKRIPT REALISIERTT WERDEN
12: BEISPIEL-WEBSEITE -> SCHWARZER DONNER
13: BEISPIEL-WEBSEITE -> AGROFORSTWIRTSCHAFT
14. VALIDIERUNG (UEBERPRUEFUNG) DES HTML-CODES

==============================================================================================
01: ALLGEMEINES

HTML5 ist eine reine textbasierte Seitenbeschreibungs- oder Auszeichnungssprache, die mit jeden
beliebigen Texteditor bearbeitet und gespeichert werden kann (Dateiendung: .html oder .htm).

Fuer die Erstellung und Bearbeitung von HTML-Webseiten reicht zwar ein beliebiger Texteditor
(kein Textbearbeitungsprogramm, keine Buerosoftware), aber einfache HTML- oder Programmeditoren
(Syntax-Highlighting, Konvertierungen von Textkodierungen, Zeilennummerierung) erleichtern
die Erstellung und Bearbeitung von HTML-Webseiten.

HTML wird in der Praxis als Ueberbegriff fuer verschiedene Sprachen benutzt:

  1. HTML - Sprache um den Inhalt einer Webseite zu erstellen und zu strukturieren; HTML ist
     keine Programnmiersprache, HTML ist nur eine textbasierte Auszeichnungssprache
  2. CSS - Sprache um das Layout einer Webseiten zu erstellen
  3. JavaScript - Sprache um das dynamische Verhalten einer Webseite festzulegen

Da HTML5 nur noch eine semantische und strukturelle Textauszeichnung erlaubt, bietet HTML5
auch keinerlei Formatierungsmoeglichkeiten mehr an. Die in HTML4 noch gestatteten Attribute
gelten in HTML5 als veraltet und sollten nicht mehr verwendet werden. Fuer die Formatierung
der Elemente ist weitesgehend nur noch CSS zustaendig.

Fuer die Verzeichnis- und Dateinamen der HTML-Webseiten sollte nur das englische Alphabet [a-zA-Z],
Zahlen [0-9], Unterstrich, Minuszeichen und der Punkt (_-.) verwendet werden. Der Grund dafuer ist,
dass einige Browser-Versionen laenderspezifischen Zeichen nicht immer korrekt lesen koennen. In
Verzeichnis- und Dateinamen sollte auch kein Leerzeichen enthalten sein. Statt des Leerzeichen
kann der Unterstrich (_) oder das Minuszeichen (-) verwendet werden.

Fuer die Formatierung der HTML-Elemente mit Hilfe von Attributen, sollten vorwiegend die
Tag-Atrribute class und id genutzt werden. Das style-Attribut innerhalb des sichtbaren
Bereichs (Beispiel: <body> [...]  <p style="color: blue">xyz</p> [...] </body>), sollte
dagegen eher sparsam verwendet werden. Das style-Attribut kann verwendet werden, um
CSS-Regeln nur auf ein HTML-Dokument zu beschraenken bzw. anzuwenden.

Hinweis: Die Formatierung mit id darf pro HTML-Dokument nur einmal verwendet werden. Die
Formatierung mit class darf dagegen im HTML-Dokument mehrfach angewandt werden.

Einige HTML-Elemente sind allein stehende Tags (standalone tags), die keinen Inhalt haben und
daher kein Ende-Tag benoetigen.

  Beispiel: <br>
  <p>Ein Zeilenumbruch<br>Die naechste Zeile</p>

In HTML5 ist die XHTML-konforme Notation (Dateiendung: .xhtml) ebenfalls gueltig und man kann
neben <br> auch <br /> verwenden. Vor dem Ende eines allein stehende Tags muss ein Leerzeichen
und ein Schraegstrich / (Slash) fuer eine gueltige XHTML-konforme Notation eingefuegt werden.

  Beispiel: <br />
  <p>Ein Zeilenumbruch<br />Die naechste Zeile</p>

Welche Notation (HTML oder XHTML) verwendet wird, muss letztendlich jeder selbst entscheiden,
nur sollte die gewaehlte Notation kuenftig einheitlich verwendet werden.

An dieser Stelle wird keine Abhandlung ueber XHTML (Extensible Hypertext Markup Language)
erfolgen. Im Gegensatz zu HTML muss der Code von XHTML wesentlich korrekter sein, da XHTML
strengere Syntaxregeln enthaelt als HTML. Statt der HTML-Dokumententyp-Deklaration ist die
XHTML-Dokumententyp-Deklaration zu verwenden.

  Beispiel: HTML5
  <!DOCTYPE html>
  <html>
  <head>
  [...]

  Beispiel: XHTML
  <?xml version="1.0" encoding="UTF-8" ?>
  <html xmlns="http://www.w3.org/1999/xhtml" land="de" xml:lang="de">
  <head>
  [...]

Hinweis: Der neue strukturierte Aufbau der HTML5-Dokumente ermoeglicht es den Suchmaschinen
(search engines) die HTML5-Webseiten schneller zu untersuchen und zu analysieren.

Anmerkung:
Im einfachtsten Fall verwendet man im Seitenquelltext von HTML-Dateien nur die ASCII-Zeichen
32-126. Diese Zeichen werden von allen Rechnern (weltweit) ohne zusaetzliche installierte
Zeichenkodierungen (Charsets) unterstuetzt.
ASCII-Code 32 bis 126: Leerzeichen, das englische Alphabet, Zahlen und einige Sonderzeichen.
siehe auch: Verzeichnis tools -> Datei: HTML-Code.html

Die Zeichenkodierung UTF-8 unterstuetzt viele bekannte Sprachen und ihre laenderspezifischen
Zeichensysteme.

==============================================================================================
02: GRUNDSAETZLICHER AUFBAU EINES HTML-DOKUMENTS

HTML5-Dokumenten-Aufbau:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Titel der Seite</title>
<style type="text/css">
/* CSS-Kommentar: Platz fuer CSS-Regeln */
</style>
</head>
<body>
<!-- HTML-Kommentar: Inhalt des HTML-Dokuments //-->
</body>
</html>

Erweiterter HTML5-Dokumenten-Aufbau (CSS-Formatierung fuer 4 Boxen - wrapper, header, main, footer)

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Titel der Seite</title>
<script type="text/javascript">
<!-- hide
/* mehrzeilige Javaskript-Kommentar
 <!-- hide //-->
 HTML-Kommentar: Internet-Browser ohne Javaskript-Unterstuetzung ignorieren den Programmcode.
 Das script-Attribut type="text/javascript" kann entfallen, da JavaScript die Standardsprache
 moderner Internet-Browser ist.

 Externe Javaskripte werden mit dem scr-Attribut eingebunden:
 <script type="text/javascript" scr="./javascript/script_name.js"></script>

 Fuer die Namen der Javaskript-Variablen duerfen nur Grosz- und Kleinbuchstaben [a-zA-Z],
 Zahlen [0-9], und der Unterstrich [_] verwendet werden. In JavaSkript wird zwischen der
 Grosz- und Kleinschreibweise unterschieden.
 Die Variablennamen muessen  mit einem Buchstaben beginnen (12k ist nicht erlaubt, k12 ist
 erlaubt). Weiterhin gibt es in Javaskript einige reservierte Namen die fuer Variablennamen
 NICHT verwendet werden duerfen (if, do, var, try, for, [...]).
 Hinweis: Diese vorgenannten Hinweise fuer Variablennamen gelten fuer die meisten anderen
 Programmiersprachen ebenfalls.

 Beispiele:
 var k;
 var timer;
 var stopp=0;
*/

// 1-zeilige Javaskript-Kommentar
// Die Funktion stoperror() sorgt dafuer, das Javaskript-Fehler NICHT an die Webseiten-Besucher
// uebergeben werden.

function stoperror() {
  return true;
}
window.onerror=stoperror;
//-->
</script>
<style type="text/css">
body {
  margin: 10px 15px 15px 10px;
  font-family: Arial, sans-serif;
  background-color: #FFFFFF;
  #000000;
}

/* Farbennotierungen
Farbnamen: red, blue, BurlyWood
           color: BurlyWood;
Farbe - hexadezimaler Code: #FF0000, #0000ff, #DEB887
                            gueltige Werte: 00 bis FF
                            color: #DEB887;
Farbe - RGB-Code: 255,0,0
                  0,0,255
                  222,184,135 -> color: rgb(222,184,135);
                  gueltige Werte: 0 bis 255
Farbe - RGB-Code mit Transparenz: color: rgba(222,184,135,0.3);
                                gueltige Werte: 0 bis 255 und 0.0 bis 1
Farbe - RGB-Code mit Prozentangaben: color: rgb(87%,75%,53%);
Farbe - Farbe mit Farbton, Saettigung und Helligkeit mischen
        color: hsl(Farbton(hue), Saettigung(Saturation), Helligkeit(Lightness))
        Der Farbton wird in Grad (0 bis 360) angegeben, die Saettigung und Helligkeit in Prozent.
        Farbton: 0 oder 360 Grad fuer den Farbton Rot, 120 fuer Gruen, 240 fuer Blau
        color: hsl(0,100%,100%);
*/

/*
id-Selektor: Die Formatierung mit id darf pro HTML-Dokument nur einmal verwendet werden.
#wrapper {
 [...]
}
Fuer die Namen der Selektoren duerfen nur Grosz- und Kleinbuchstaben [a-zA-Z], Zahlen [0-9],
Bindestrich [-] und der Unterstrich [_] verwendet werden. Der Name des Selektors darf außerdem
nicht mit einer Ziffer beginnen (#12wrapper ist nicht erlaubt, #_12wrapper ist erlaubt).
In HTML5 unnterscheidet der Browser nicht zwischen der  Grosz- und Kleinschreibweise. 
In XHTML wird aber zwischen in der  Grosz- und Kleinschreibweise unterschieden.

margin: 3px 2px 3px 2px;
1. Zahl 3px - Auszenabstand oben
2. Zahl 2px - Auszenabstand rechts
3. Zahl 3px - Auszenabstand unten
4. Zahl 2px - Auszenabstand links

padding: 2px 8px 2px 8px;
1. Zahl 2px - Innenabstand oben
2. Zahl 8px - Innenabstand rechts
3. Zahl 2px - Innenabstand unten
4. Zahl 8px - Innenabstand links

*/

#wrapper {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  border: 1px solid black;
  width: 1000px;
}

/* Tag-Gruppen-Formatierung */
header, main, footer {
  margin: 3px 2px 3px 2px;
  padding: 2px 8px 2px 8px;
  border: 1px solid black;
}

/* CSS-Kommentar: generische Schriftarten oder Schriftklassen
 serif, sans-serif, monospace, cursive und fantasy

 Verwandte Schriftarten der generische Schriftfonts:
 serif -> Times, Times New Roman, Georgia, Bookman
 sans-serif -> Arial, Verdana, Helvetica, Lucia
 monospace -> Courier, Courier New, Angale Mono, Fixed
 cursive -> Comic Samns MS, Florence, Parkavenue, Monotype Corsiva
 fantasy -> Impact, Haettenschweiler, Oldtown, Brushstroke

 Hinweis: Die generischen Schriftarten sollten von jeden Internet-Browser unterstuetzt werden.

 Das style-Attribut type="text/css" (MIME-Typ) kann entfallen, da dies der Vorgabe-Wert ist.
 MIME steht fuer Internet Media Type. Urspruenglich stand die Abkuerzung fuer Multipurpose
 Internet Mail Extension und wurde fuer Dateianhaenge von E-Mails verwendet.

 Externe CSS-Dateien werden mit dem scr-Attribut eingebunden:
 <link rel="stylesheet" type="text/css" href="./css/css_name.css">

 Eine Kombination aus internen und externen Style-Angaben sind erlaubt:
 <link rel="stylesheet" type="text/css" href="./css/css_name.css">
 <style type="text/css">
/*
class-Selektor: Die Formatierung mit class darf im HTML-Dokument mehrfach angewandt werden.
.red {
 [...]
}

td.red {
 [...]
}
Fuer die Namen der Selektoren duerfen nur Grosz- und Kleinbuchstaben [a-zA-Z], Zahlen [0-9],
Bindestrich [-] und der Unterstrich [_] verwendet werden. Der Name des Selektors darf außerdem
nicht mit einer Ziffer beginnen (.12red ist nicht erlaubt, ._12red ist erlaubt).
In HTML5 unnterscheidet der Browser nicht zwischen der  Grosz- und Kleinschreibweise. 
In XHTML wird aber zwischen in der  Grosz- und Kleinschreibweise unterschieden.
*/
 .red {
  font-size: 0.95em;
  font-weight: bold;
  text-align: center;
  color: #DD0000;
}
 </style>

 Anmerkung: Widerspechen sich Style-Angaben in den externen CSS-Dateien mit den Angaben in den
 Deklarationen der HTML-Webseite, so werden die CSS-Angaben in der HTML-Datei vorrangig genutzt.
 In der Regel ueberschreiben nachfolgende CSS-Angaben die vorherigen CSS-Deklarationen.
*/

/*
Hinweis: Findet der Browser den Schriffont Verdana nicht, so verwendet er automatisch
den nachfolgenden Schriftfont sans-serif.
*/
h1 {
  font-family: Verdana, sans-serif;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

h2 {
  font-size: 16px;
  font-weight: bold;
}

h3 {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

/* Pseudo-class-Formatierung */
a:link { color:#C15C63; }

a:active { color:#C15C63; }

a:visited { color:#C15C63; }

a:hover { color:#8D343A; }

/* class-Formatierung */
.center { text-align: center; }

p { font-size: 12px; }

/* CSS-Kommentar: Platz fuer weitere CSS-Regeln */
</style>
</head>
<body>
<!-- HTML-Kommentar: Inhalt des HTML-Dokuments //-->
</body>
</html>

Erweiterter HTML5-Dokumenten-Aufbau mit 4 Boxen (wrapper, header, main, footer)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Titel der Seite</title>
<script type="text/javascript">
<!-- hide

function stoperror() {
  return true;
}
window.onerror=stoperror;
//-->
</script>
<style type="text/css">
body {
  margin:10px 15px 15px 10px;
  font-family: sans-serif;
  background-color:#FFFFFF;
  color:#000000;
}

#wrapper {
  display: block;
  justify-content: center;
}

header {
  display: flex;
  justify-content: center;
}

main, footer {
  display: block;
  justify-content: left;
}

h1 {
  font-family: sans-serif;
  font-size: 18px;
  text-align: center;
  color: #0050A0;
}

h2 {
  font-family: sans-serif;
  font-size: 14px;
  text-align: left;
  color: #0050A0;
}

p { font-size: 12px; }

</style>
</head>
<body>
<div id="wrapper">
  <header>
    <h1>Titel</h1>
  </header>
  <main>
    <article>
      <h2>Titel des Artikels 1</h2>
      <p>Haupttext des Artikels 1 Haupttext des Artikels 1 Haupttext des Artikels 1 Haupttext des Artikels 1</p>
    </article>
    <article>
      <h2>Titel des Artikels 2</h2>
      <p>Haupttext des Artikels 2 Haupttext des Artikels 2 Haupttext des Artikels 2 Haupttext des Artikels 2</p>
    </article>
  </main>
  <footer>
    <p>&nbsp;</p>
  </footer>
</div>
</body>
</html>

==============================================================================================
03: BOX-MODELL

Das Box-Modell von CSS ist die Grundlage fuer die Positionierung von Elementen in einem Dokument.

Auf Webseiten der kein Javaskript enthaelt kann der nachfolgende Programmcode entfallen. Dieser
Programmcode sorgt dafuer, dass Webseitenbesucher KEINE Fehlermeldungen zu sehen bekommen.

<script type="text/javascript">
<!-- hide

function stoperror() {
  return true;
}
window.onerror=stoperror;
//-->
</script>

03.1: WEBSEITE MIT 5 BOXEN, NAVIGATION AUF DER LINKEN SEITE

Der folgende HTML-Code erzeugt eine Webseite die aus 5 Boxen besteht:
  1. wrapper: die umschlieszende Box (mit sichtbarer Umrandung) des sichtbaren Bereichs der Webseite
  2. header: Box enthaelt hier nur den Hauptnamen der Webseite HOME (keine sichtbare Umrandung)
  3. aside: Box ehthaelt die Seiten-Navigation (mit sichtbarer Umrandung)
  4. main: Box enthaelt den Hauptteil des Inhaltes der Webseite HOME (mit sichtbarer Umrandung)
  5. footer: Box enthaelt den Text im Fuszbereich der Webseite HOME (keine sichtbare Umrandung)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>OBELIX</title>
<script type="text/javascript">
<!-- hide

function stoperror() {
  return true;
}
window.onerror=stoperror;
//-->
</script>
<style type="text/css">
html { font-size: 100%; }

body {
  margin: 10px 15px 15px 10px;
  font-family: Arial, sans-serif;
  font-size: 0.95em;
}

#wrapper {
  margin: 0px 0px 0px 0px;
  padding: 3px 8px 3px 8px;
  border: 1px solid black;
  width: 1400px;
}

header, footer {
  margin: 0px 3px 0px 3px;
  padding: 0px 8px 0px 8px;
}

main {
  margin: 3px 3px 3px 3px;
  padding: 8px 8px 8px 8px;
  border: 1px solid black;
  width: 1125px;
  min-height: 650px;
  float: right;
}

aside {
  margin: 3px 28px 3px 3px;
  padding: 8px 8px 8px 8px;
  border: 1px solid black;
  width: 200px;
  min-height: 650px;
  float: left;
}

article {
  margin: 3px 3px 3px 3px;
  padding: 8px 8px 8px 8px;
  width: 1100px;
}

.clear { clear: both; }

h1 {
  font-size: 1.3em;
  font-weight: bold;
  text-align: center;
}

h2 {
  font-size: 1.2em;
  font-weight: bold;
}

h3 {
  font-size: 1.15em;
  font-weight: bold;
  text-align: center;
}

.red {
  font-size: 0.95em;
  font-weight: bold;
  text-align: center;
  color: #DD0000;
}

ul, li {
  list-style-type: disc;
  font-size: 0.9em;
  line-height: 1.7em;
}

a {
  font-family: sans-serif;
  font-size: 0.95em;
  font-weight: bold;
}

a:link { color: #C15C63; }

a:active { color: #C15C63; }

a:visited { color: #C15C63; }

a:hover { color: #8D343A; }

.link_activated { background-color: #EBDACC; }

.center { text-align: center; }

p {
  margin: 2px 2px 2px 2px;
  padding: 2px 2px 2px 2px;
  font-size: 0.9em;
}

</style>
</head>
<body>
<div id="wrapper">
  <header>
    <h1>HOME</h1>
  </header>
  <aside>
    <h2>Navigation</h2>
    <ul>
      <li><a href="./obelix5.php?OBELIX_ID=0">LOGOUT</a></li>
      <li><a href="./obelix5.php?OBELIX_ID=1" class="link_activated">HOME</a></li>
      <li><a href="./obelix5.php?OBELIX_ID=2">UPLOAD</a></li>
      <li><a href="./obelix5.php?OBELIX_ID=3">UNPACK</a></li>
      <li><a href="./obelix5.php?OBELIX_ID=4">DELETE</a></li>
      <li><a href="./obelix5.php?OBELIX_ID=5">HYPERLINK-LISTING</a></li>
      <li><a href="./obelix5.php?OBELIX_ID=6">HTACCESS</a></li>
      <li><a href="./obelix5.php?OBELIX_ID=7">GETCWD</a></li>
      <li><a href="./obelix5.php?OBELIX_ID=8">PHPINFO</a></li>
      <li><a href="./obelix5.php?OBELIX_ID=9">FILELIST</a></li>
      <li><a href="./obelix5.php?OBELIX_ID=10">SITEMAP</a></li>
      <li><a href="./obelix5.php?OBELIX_ID=11">SPLITFILES</a></li>
      <li><a href="./obelix5.php?OBELIX_ID=12">DIRDELETE</a></li>
      <li><a href="./obelix5.php?OBELIX_ID=13">EXEC</a></li>
      <li><a href="./obelix5.php?OBELIX_ID=14">MySQLi-TABLES</a></li>
      <li><a href="./obelix5.php?OBELIX_ID=15">MySQLi-COMMAND</a></li>
      <li><a href="./obelix5.php?OBELIX_ID=16">IMAGE-EDITING</a></li>
      <li><a href="./obelix5.php?OBELIX_ID=17">ACCESS-AUTHORITY</a></li>
      <li><a href="./obelix5.php?OBELIX_ID=18">CREATE-FILE</a></li>
      <li><a href="./obelix5.php?OBELIX_ID=19">HOST-INTRUSION-DETECTION</a></li>
      <li><a href="./obelix5.php?OBELIX_ID=20">MOVE-OBELIX</a></li>
      <li><a href="./obelix5.php?OBELIX_ID=21">COLORPALETTE</a></li>
      <li><a href="./obelix5.php?OBELIX_ID=22">DOWNLOAD-DEPOT</a></li>
      <li><a href="./obelix5.php?OBELIX_ID=23">ROUTINE-CHECK</a></li>
    </ul>
  </aside>
  <main> 
    <article>
      <h3>Titel der Webseite HOME (Seiten-Navigation auf der linken Seite)</h3>
      <p>Hier steht der Haupttext.<br><br></p>
      <p>Hinweis: Dies ist nur die Ansicht einer Seite. Die Links auf dieser Webseite f&uuml;hren ins Leere.<br><br></p>
      <p>&Uuml;ber die rechte Maustaste kann man sich den Seitenquelltext ansehen.<br><br></p>
      <p class="red">Warnung: Hier steht ein farblich hervorgehobener Hinweistext!</p>
      <p><br><br><strong>Achtung:</strong> Hier steht ein weiterer Text.</p>
    </article>
  </main>
  <footer class="clear">
    <p class="center">Welcome to Obelix v. 3.1.0 - Monday, 06.03.2023 - 10:14:49 - Berechnungszeit (PHP-Server): 0.00035 Sekunden</p>
  </footer>
</div>
</body>
</html>

ANMERKUNG: Die GET-Variable im Link (<a href="./obelix5.php?OBELIX_ID=20">), wird bei PHP-Seiten zum Aufruf
der entsprechenden Webseiten benoetigt.

Bei Verwendung von PHP-Code ist die Dateiendung von .htm in .php zu aendern. Der PHP-Code ist dann vor der
<!doctype>-Deklaration einzufuegen.

Bei reinen HTML-Seiten sieht der Navigationbereich in etwa wie folgt aus:

    <ul>
      <li><a href="./logout.htm">LOGOUT</a></li>
      <li><a href="./home.htm">HOME</a></li>
      [...]
      <li><a href="./move_obelix.htm">MOVE-OBELIX</a></li>
      <li><a href="./colorpalette.htm">COLORPALETTE</a></li>
      <li><a href="./download_depot.htm">DOWNLOAD-DEPOT</a></li>
      <li><a href="./routine_check.htm">ROUTINE-CHECK</a></li>
    </ul>


03.2: WEBSEITE MIT 5 BOXEN, NAVIGATION AUF DER RECHTEN SEITE

Der folgende HTML-Code erzeugt eine Webseite die aus 5 Boxen besteht:
  1. wrapper: die umschlieszende Box (mit sichtbarer Umrandung) des sichtbaren Bereichs der Webseite
  2. header: Box enthaelt hier nur den Hauptnamen der Webseite HOME (keine sichtbare Umrandung)
  3. main: Box enthaelt den Hauptteil des Inhaltes der Webseite HOME (mit sichtbarer Umrandung)
  4. aside: Box ehthaelt die Seiten-Navigation (mit sichtbarer Umrandung)
  5. footer: Box enthaelt den Text im Fuszbereich der Webseite HOME (keine sichtbare Umrandung)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>OBELIX</title>
<script type="text/javascript">
<!-- hide

function stoperror() {
  return true;
}
window.onerror=stoperror;
//-->
</script>
<style type="text/css">
html { font-size: 100%; }

body {
  margin: 10px 15px 15px 10px;
  font-family: Arial, sans-serif;
  font-size: 0.95em;
}

#wrapper {
  margin: 0px 0px 0px 0px;
  padding: 3px 8px 3px 8px;
  border: 1px solid black;
  width: 1400px;
}

header, footer {
  margin: 0px 3px 0px 3px;
  padding: 0px 8px 0px 8px;
}

main {
  margin: 3px 3px 3px 3px;
  padding: 8px 8px 8px 8px;
  border: 1px solid black;
  width: 1125px;
  min-height: 650px;
  float: left;
}

aside {
  margin: 3px 28px 3px 3px;
  padding: 8px 8px 8px 8px;
  border: 1px solid black;
  width: 200px;
  min-height: 650px;
  float: right;
}

article {
  margin: 3px 3px 3px 3px;
  padding: 8px 8px 8px 8px;
  width: 1100px;
}

.clear { clear: both; }

h1 {
  font-size: 1.3em;
  font-weight: bold;
  text-align: center;
}

h2 {
  font-size: 1.2em;
  font-weight: bold;
}

h3 {
  font-size: 1.15em;
  font-weight: bold;
  text-align: center;
}

.red {
  font-size: 0.95em;
  font-weight: bold;
  text-align: center;
  color: #DD0000;
}

ul, li {
  list-style-type: disc;
  font-size: 0.9em;
  line-height: 1.7em;
}

a {
  font-family: sans-serif;
  font-size: 0.95em;
  font-weight: bold;
}

a:link { color: #C15C63; }

a:active { color: #C15C63; }

a:visited { color: #C15C63; }

a:hover { color: #8D343A; }

.center { text-align: center; }

p {
  margin: 2px 2px 2px 2px;
  padding: 2px 2px 2px 2px;
  font-size: 0.9em;
}

</style>
</head>
<body>
<div id="wrapper">
  <header>
    <h1>HOME</h1>
  </header>
  <main> 
    <article>
      <h3>Titel der Webseite HOME (Seiten-Navigation auf der rechten Seite)</h3>
      <p>Hier steht der Haupttext.<br><br></p>
      <p>Hinweis: Dies ist nur die Ansicht einer Seite. Die Links auf dieser Webseite f&uuml;hren ins Leere.<br><br></p>
      <p>&Uuml;ber die rechte Maustaste kann man sich den Seitenquelltext ansehen.<br><br></p>
      <p class="red">Warnung: Hier steht ein farblich hervorgehobener Hinweistext!</p>
      <p><br><br><strong>Achtung:</strong> Hier steht ein weiterer Text.</p>
    </article>
  </main>
  <aside>
    <h2>Navigation</h2>
    <ul>
      li><a href="./logout.htm">LOGOUT</a></li>
      <li><a href="./home.htm">HOME</a></li>
      <li><a href="./upload.htm">UPLOAD</a></li>
      <li><a href="./unpack.htm">UNPACK</a></li>
      <li><a href="./delete.htm">DELETE</a></li>
      <li><a href="./hyperlink_listing.htm">HYPERLINK-LISTING</a></li>
      <li><a href="./htaccess.htm">HTACCESS</a></li>
      <li><a href="./getcwd.htm">GETCWD</a></li>
      <li><a href="./phpinfo.htm">PHPINFO</a></li>
      <li><a href="./filelist.htm">FILELIST</a></li>
      <li><a href="./sitemap.htm">SITEMAP</a></li>
      <li><a href="./splitfiles.htm">SPLITFILES</a></li>
      <li><a href="./dirdelete.htm">DIRDELETE</a></li>
      <li><a href="./exec.htm">EXEC</a></li>
      <li><a href="./mysqli_tables.htm">MySQLi-TABLES</a></li>
      <li><a href="./mysqli_command.htm">MySQLi-COMMAND</a></li>
      <li><a href="./image_editing.htm">IMAGE-EDITING</a></li>
      <li><a href="./access_authority.htm">ACCESS-AUTHORITY</a></li>
      <li><a href="./create_file.htm">CREATE-FILE</a></li>
      <li><a href="./hid.htm">HOST-INTRUSION-DETECTION</a></li>
      <li><a href="./move_obelix.htm">MOVE-OBELIX</a></li>
      <li><a href="./colorpalette.htm">COLORPALETTE</a></li>
      <li><a href="./download_depot.htm">DOWNLOAD-DEPOT</a></li>
      <li><a href="./routine_check.htm">ROUTINE-CHECK</a></li>
    </ul>
  </aside>
  <footer class="clear">
    <p class="center">Welcome to Obelix v. 3.1.0 - Monday, 06.03.2023 - 10:14:49 - Berechnungszeit (PHP-Server): 0.00035 Sekunden</p>
  </footer>
</div>
</body>
</html>

03.3: WEBSEITE MIT 5 BOXEN, NAVIGATION OBEN

Die Links fuer die Navigation, wird in einer Tabelle eingetragen. Tabellen gelten mitunter als veraltet,
aber die Darstellung von geeigneten Inhalten in Tabellen ist sehr stabil und wird in allen Browsern
korrekt angezeigt.

Der folgende HTML-Code erzeugt eine Webseite die aus 5 Boxen besteht:
  1. wrapper: die umschlieszende Box (mit sichtbarer Umrandung) des sichtbaren Bereichs der Webseite
  2. header: Box enthaelt hier nur den Hauptnamen der Webseite HOME (keine sichtbare Umrandung)
  3. navigation: Box ehthaelt die Seiten-Navigation (mit sichtbarer Umrandung)
  4. main: Box enthaelt den Hauptteil des Inhaltes der Webseite HOME (mit sichtbarer Umrandung)
  5. footer: Box enthaelt den Text im Fuszbereich der Webseite HOME (keine sichtbare Umrandung)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>OBELIX</title>
<script type="text/javascript">
<!-- hide

function stoperror() {
  return true;
}
window.onerror=stoperror;
//-->
</script>
<style type="text/css">
html { font-size: 100%; }

body {
  margin: 10px 15px 15px 10px;
  font-family: Arial, sans-serif;
  font-size: 0.95em;
}

#wrapper {
  margin: 0px 0px 0px 0px;
  padding: 5px 10px 5px 10px;
  border: 1px solid black;
  width: 1200px;
}

header, footer {
  margin: 0px 3px 0px 3px;
  padding: 0px 8px 0px 8px;
}

navigation {
  margin: 3px 3px 3px 3px;
  padding: 10px 10px 10px 10px;
  border: 1px solid black;
  width: 1170px;
  float: left;
}

main {
  margin: 3px 3px 3px 3px;
  padding: 10px 10px 10px 10px;
  border: 1px solid black;
  width: 1170px;
  min-height: 500px;
  float: left;
}

#div_center {
  display: flex;
  justify-content: center;
  align-content: center;
}

.td_head_foot { font-size: 0.5em; }

.td_navi {
  text-align: center;
  font-size: 0.8em;
  padding: 2px 8px 6px 8px;
}

article {
  margin: 3px 3px 3px 3px;
  padding: 8px 8px 8px 8px;
  width: 1100px;
}

.clear { clear: both; }

h1 {
  font-size: 1.3em;
  font-weight: bold;
  text-align: center;
}

h2 {
  font-size: 1.2em;
  font-weight: bold;
}

h3 {
  font-size: 1.15em;
  font-weight: bold;
  text-align: center;
}

.red {
  font-size: 0.95em;
  font-weight: bold;
  text-align: center;
  color: #DD0000;
}

a {
  font-family: sans-serif;
  font-size: 0.95em;
  font-weight: bold;
}

a:link { color: #C15C63; }

a:active { color: #C15C63; }

a:visited { color: #C15C63; }

a:hover { color: #8D343A; }

.center { text-align: center; }

p {
  margin: 2px 2px 2px 2px;
  padding: 2px 2px 2px 2px;
  font-size: 0.9em;
}

</style>
</head>
<body>
<div id="wrapper">
  <header>
    <h1>HOME</h1>
  </header>
  <navigation>
    <div id="div_center">
      <table>
        <thead>
          <tr>
            <td colspan="9" class="td_head_foot">&nbsp;</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="td_navi"><a href="./logout.htm">LOGOUT</a></td>
            <td class="td_navi"><a href="./home.htm">HOME</a></td>
            <td class="td_navi"><a href="./upload.htm">UPLOAD</a></td>
            <td class="td_navi"><a href="./unpack.htm">UNPACK</a></td>
            <td class="td_navi"><a href="./delete.htm">DELETE</a></td>
            <td class="td_navi"><a href="./hyperlink_listing.htm">HYPERLINK-LISTING</a></td>
            <td class="td_navi"><a href="./htaccess.htm">HTACCESS</a></td>
            <td class="td_navi"><a href="./getcwd.htm">GETCWD</a></td>
            <td class="td_navi"><a href="./phpinfo.htm">PHPINFO</a></td>
          </tr>
          <tr>
            <td class="td_navi"><a href="./dirdelete.htm">DIRDELETE</a></td>
            <td class="td_navi"><a href="./exec.htm">EXEC</a></td>
            <td class="td_navi"><a href="./mysqli_tables.htm">MySQLi-TABLES</a></td>
            <td class="td_navi"><a href="./mysqli_command.htm">MySQLi-COMMAND</a></td>
            <td class="td_navi"><a href="./image_editing.htm">IMAGE-EDITING</a></td>
            <td class="td_navi"><a href="./access_authority.htm">ACCESS-AUTHORITY</a></td>
            <td class="td_navi"><a href="./create_file.htm">CREATE-FILE</a></td>
            <td class="td_navi"><a href="./hid.htm">HOST-INTRUSION-DETECTION</a></td>
            <td class="td_navi"><a href="./move_obelix.htm">MOVE-OBELIX</a></td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="9" class="td_head_foot">&nbsp;</td>
          </tr>
        </tfoot>
      </table>
    </div>
  </navigation>
  <main> 
    <article>
      <h3>Titel der Webseite HOME</h3>
      <p>Hier steht der Haupttext (Seiten-Navigation oben).<br><br></p>
      <p>Hinweis: Dies ist nur die Ansicht einer Seite. Die Links auf dieser Webseite f&uuml;hren ins Leere.<br><br></p>
      <p>&Uuml;ber die rechte Maustaste kann man sich den Seitenquelltext ansehen.<br><br></p>
      <p class="red">Warnung: Hier steht ein farblich hervorgehobener Hinweistext!</p>
      <p><br><br><strong>Achtung:</strong> Hier steht ein weiterer Text.</p>
    </article>
  </main>
  <footer class="clear">
    <p class="center">Welcome to Obelix v. 3.1.0 - Monday, 06.03.2023 - 10:14:49 - Berechnungszeit (PHP-Server): 0.00035 Sekunden</p>
  </footer>
</div>
</body>
</html>

==============================================================================================
04: WEBSEITE MIT DOWNLOAD-TABELLE

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>OBELIX</title>
<script type="text/javascript">
<!-- hide

function stoperror() {
  return true;
}
window.onerror=stoperror;
//-->
</script>
<style type="text/css">
html { font-size: 100%; }

body {
  margin: 10px 15px 15px 10px;
  font-family: Arial, sans-serif;
  font-size: 0.95em;
}

#wrapper {
  margin: 0px 0px 0px 0px;
  padding: 3px 8px 3px 8px;
  border: 1px solid black;
  width: 1200px;
}

header, footer {
  margin: 0px 3px 0px 3px;
  padding: 0px 8px 0px 8px;
}

main {
  margin: 3px 3px 3px 3px;
  padding: 8px 8px 8px 8px;
  border: 1px solid black;
  width: 915px;
  min-height: 650px;
  float: right;
}

aside {
  margin: 3px 28px 3px 3px;
  padding: 8px 8px 8px 8px;
  border: 1px solid black;
  width: 200px;
  min-height: 650px;
  float: left;
}

article {
  margin: 3px 3px 3px 3px;
  padding: 8px 8px 8px 8px;
  width: 1100px;
}

.clear { clear: both; }

h1 {
  font-size: 1.3em;
  font-weight: bold;
  text-align: center;
}

h2 {
  font-size: 1.2em;
  font-weight: bold;
}

h3 {
  font-size: 1.15em;
  font-weight: bold;
  text-align: center;
}

table_main { width: 100%; }

td { font-size: 0.9em; }

hr { width: 100%; }

#div_center {
  display: flex;
  justify-content: center;
  align-content: center;
}

.table_result {
  border-collapse: collapse;
  border: 1px solid gray;
}

.table_title {
  padding: 2px 6px 2px 6px;
  font-size: 0.9em;
  text-align: center;
  border: 1px solid gray;
  background-color: #CFC181;
}

.table_field_1 {
  padding: 2px 6px 2px 6px;
  font-size: 0.9em;
  text-align: left;
  border-left: 1px solid gray;
  border-bottom: 1px solid gray;
}

.table_field_2 {
  padding: 2px 6px 2px 6px;
  font-size: 0.9em;
  text-align: center;
  border-left: 1px solid gray;
  border-bottom: 1px solid gray;
}

.table_field_3 {
  padding: 2px 6px 2px 6px;
  font-size: 0.9em;
  text-align: center;
  border-left: 1px solid gray;
  border-bottom: 1px solid gray;
}

.table_field_4 {
  padding: 2px 6px 2px 6px;
  font-size: 0.9em;
  text-align: center;
  border-left: 1px solid gray;
  border-bottom: 1px solid gray;
}

.table_field_5 {
  padding: 2px 6px 2px 6px;
  font-size: 0.9em;
  text-align: center;
  border-left: 1px solid gray;
  border-bottom: 1px solid gray;
}

.table_field_6 {
  padding: 2px 6px 2px 6px;
  font-size: 0.9em;
  text-align: center;
  border-left: 1px solid gray;
  border-bottom: 1px solid gray;
  border-right: 1px solid gray;
}

.table_footer {
  padding: 2px 6px 2px 6px;
  font-size: 0.9em;
  text-align: left;
  border-left: 1px solid gray;
  border-bottom: 1px solid gray;
  border-right: 1px solid gray;
  background-color: #CFC181;
}

.data_field_1 {
  text-align: right;
  padding: 2px 4px 2px 4px;
  border-right: 1px solid gray;
  border-bottom: 1px solid gray;
}

.data_field_2 {
  padding: 2px 4px 2px 4px;
  border-right: 1px solid gray;
  border-bottom: 1px solid gray;
}

.data_field_3 {
  padding: 2px 4px 2px 4px;
  border-right: 1px solid gray;
  border-bottom: 1px solid gray;
}

.data_field_4 {
  text-align: center;
  padding: 2px 4px 2px 4px;
  border-right: 1px solid gray;
  border-bottom: 1px solid gray;
}

.data_field_5 {
  text-align: right;
  padding: 2px 4px 2px 4px;
  border-right: 1px solid gray;
  border-bottom: 1px solid gray;
}

.data_field_6 {
  text-align: center;
  border-right: 1px solid gray;
  border-bottom: 1px solid gray;
}

.center { text-align: center; }

ul, li {
  list-style-type: disc;
  font-size: 0.9em;
  line-height: 1.7em;
}

a {
  font-family: sans-serif;
  font-size: 0.95em;
  font-weight: bold;
}

a:link { color: #C15C63; }

a:active { color: #C15C63; }

a:visited { color: #C15C63; }

a:hover { color: #8D343A; }

.center { text-align: center; }

p {
  margin: 2px 2px 2px 2px;
  padding: 2px 2px 2px 2px;
  font-size: 0.9em;
}

</style>
</head>
<body>
<div id="wrapper">
  <header>
    <h1>DOWNLOAD-DEPOT</h1>
  </header>
  <aside>
    <h2>Navigation</h2>
    <ul>
      <li><a href="./logout.htm">LOGOUT</a></li>
      <li><a href="./home.htm">HOME</a></li>
      <li><a href="./upload.htm">UPLOAD</a></li>
      <li><a href="./unpack.htm">UNPACK</a></li>
      <li><a href="./delete.htm">DELETE</a></li>
      <li><a href="./hyperlink_listing.htm">HYPERLINK-LISTING</a></li>
      <li><a href="./htaccess.htm">HTACCESS</a></li>
      <li><a href="./getcwd.htm">GETCWD</a></li>
      <li><a href="./phpinfo.htm">PHPINFO</a></li>
      <li><a href="./filelist.htm">FILELIST</a></li>
      <li><a href="./sitemap.htm">SITEMAP</a></li>
      <li><a href="./splitfiles.htm">SPLITFILES</a></li>
      <li><a href="./dirdelete.htm">DIRDELETE</a></li>
      <li><a href="./exec.htm">EXEC</a></li>
      <li><a href="./mysqli_tables.htm">MySQLi-TABLES</a></li>
      <li><a href="./mysqli_command.htm">MySQLi-COMMAND</a></li>
      <li><a href="./image_editing.htm">IMAGE-EDITING</a></li>
      <li><a href="./access_authority.htm">ACCESS-AUTHORITY</a></li>
      <li><a href="./create_file.htm">CREATE-FILE</a></li>
      <li><a href="./hid.htm">HOST-INTRUSION-DETECTION</a></li>
      <li><a href="./move_obelix.htm">MOVE-OBELIX</a></li>
      <li><a href="./colorpalette.htm">COLORPALETTE</a></li>
      <li><a href="./download_depot.htm">DOWNLOAD-DEPOT</a></li>
      <li><a href="./routine_check.htm">ROUTINE-CHECK</a></li>
    </ul>
  </aside>
  <main>
      <table class="table_main">
        <tr>
          <td colspan="3" class="center"><h3>DOWNLOAD-DEPOT - Liste mit gepackten Archiven</h3></td>
        </tr>
        <tr>
          <td colspan="3">Hinweis: Dies ist nur die Ansicht einer Seite. Die Links auf dieser Webseite f&uuml;hren ins Leere. &Uuml;ber die rechte Maustaste kann man sich den Seitenquelltext ansehen.</td>
        </tr>
        <tr>
          <td colspan="3">&nbsp;</td>
        </tr>
        <tr>
          <td colspan="3"><hr></td>
        </tr>
        <tr>
          <td colspan="3">&nbsp;</td>
        </tr>
        <tr>
          <td colspan="3">
            <div id="div_center">
              <table class="table_result">
                <thead>
                  <tr>
                    <th colspan="6" class="table_title">Download-Archiv</th>
                  </tr>
                  <tr>
                    <th class="table_field_1">Lfd.-Nr.:</th>
                    <th class="table_field_2">Thema</th>
                    <th class="table_field_3">Erl&auml;uterung</th>
                    <th class="table_field_4">letzte &Auml;nderung<br>des Inhaltes</th>
                    <th class="table_field_5">Dateigr&ouml;&szlig;e</th>
                    <th class="table_field_6">Download</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="data_field_1">1</td>
                    <td class="data_field_2">Buddhismus</td>
                    <td class="data_field_3">Die vier edlen Wahreheiten - PDF-Dokument</td>
                    <td class="data_field_4">27.02.2023 - 11:37:57</td>
                    <td class="data_field_5">256 kB</td>
                    <td class="data_field_6"><a href="./download_depot/Buddhismus_Die_vier_edlen_Wahreheiten_-_PDF-Dokument.zip" target="_self">Download</a></td>
                  </tr>
                  <tr>
                    <td class="data_field_1">2</td>
                    <td class="data_field_2">Handbuch</td>
                    <td class="data_field_3">Handbuch fuer Administratoren und IT-Systembetreuer - Windows - PDF-Dokument</td>
                    <td class="data_field_4">27.02.2023 - 11:39:26</td>
                    <td class="data_field_5">18.2 MB</td>
                    <td class="data_field_6"><a href="./download_depot/Handbuch_Handbuch_fuer_Administratoren_und_IT-Systembetreuer_-_Windows_-_PDF-Dokument.zip" target="_self">Download</a></td>
                  </tr>
                  <tr>
                    <td colspan="6">&nbsp;</td>
                  </tr>
                </tbody>
                <tfoot>
                  <tr>
                    <td colspan="6" class="table_footer"><strong>Verzeichnisse:</strong> ./download_depot</td>
                  </tr>
                </tfoot>
              </table>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="3">&nbsp;</td>
        </tr>
      </table>
  </main>
  <footer class="clear">
    <p class="center">Welcome to Obelix v. 3.1.0 - Tuesday, 07.03.2023 - 09:24:07 - Berechnungszeit (PHP-Server): 0.0003 Sekunden</p>
  </footer>
</div>
</body>
</html>

==============================================================================================
05: WEBSEITE MIT IFRAME

Datei: page_05.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>OBELIX</title>
<script type="text/javascript">
<!-- hide

function stoperror() {
  return true;
}
window.onerror=stoperror;
//-->
</script>
<style type="text/css">
html { font-size: 100%; }

body {
  margin: 10px 15px 15px 10px;
  font-family: Arial, sans-serif;
  font-size: 0.95em;
}

#wrapper {
  margin: 0px 0px 0px 0px;
  padding: 3px 8px 3px 8px;
  border: 1px solid black;
  width: 1200px;
}

header, footer {
  margin: 0px 3px 0px 3px;
  padding: 0px 8px 0px 8px;
}

main {
  margin: 3px 3px 3px 3px;
  padding: 8px 8px 8px 8px;
  border: 1px solid black;
  width: 915px;
  min-height: 600px;
  float: right;
}

aside {
  margin: 3px 28px 3px 3px;
  padding: 8px 8px 8px 8px;
  border: 1px solid black;
  width: 200px;
  min-height: 600px;
  float: left;
}

iframe {
  border-style: none;
  overflow: auto;
}

.clear { clear: both; }

h1 {
  font-size: 1.3em;
  font-weight: bold;
  text-align: center;
}

h2 {
  font-size: 1.2em;
  font-weight: bold;
}

.center { text-align: center; }

ul, li {
  list-style-type: disc;
  font-size: 0.9em;
  line-height: 1.7em;
}

a {
  font-family: sans-serif;
  font-size: 0.95em;
  font-weight: bold;
}

a:link { color: #C15C63; }

a:active { color: #C15C63; }

a:visited { color: #C15C63; }

a:hover { color: #8D343A; }

.center { text-align: center; }

p {
  margin: 2px 2px 2px 2px;
  padding: 2px 2px 2px 2px;
  font-size: 0.9em;
}

</style>
</head>
<body>
<div id="wrapper">
  <header>
    <h1>WEBSEITE MIT IFRAME</h1>
  </header>
  <aside>
    <h2>Navigation</h2>
    <ul>
      <li><a target="main_iframe" href="./pages_05/logout.htm">LOGOUT</a></li>
      <li><a target="main_iframe" href="./pages_05/home.htm">HOME</a></li>
      <li><a target="main_iframe" href="./pages_05/upload.htm">UPLOAD</a></li>
      <li><a target="main_iframe" href="./pages_05/unpack.htm">UNPACK</a></li>
      <li><a target="main_iframe" href="./pages_05/delete.htm">DELETE</a></li>
      <li><a target="main_iframe" href="./pages_05/hyperlink_listing.htm">HYPERLINK-LISTING</a></li>
      <li><a target="main_iframe" href="./pages_05/htaccess.htm">HTACCESS</a></li>
      <li><a target="main_iframe" href="./pages_05/getcwd.htm">GETCWD</a></li>
      <li><a target="main_iframe" href="./pages_05/phpinfo.htm">PHPINFO</a></li>
      <li><a target="main_iframe" href="./pages_05/filelist.htm">FILELIST</a></li>
      <li><a target="main_iframe" href="./pages_05/sitemap.htm">SITEMAP</a></li>
      <li><a target="main_iframe" href="./pages_05/splitfiles.htm">SPLITFILES</a></li>
      <li><a target="main_iframe" href="./pages_05/dirdelete.htm">DIRDELETE</a></li>
      <li><a target="main_iframe" href="./pages_05/exec.htm">EXEC</a></li>
      <li><a target="main_iframe" href="./pages_05/mysqli_tables.htm">MySQLi-TABLES</a></li>
      <li><a target="main_iframe" href="./pages_05/mysqli_command.htm">MySQLi-COMMAND</a></li>
      <li><a target="main_iframe" href="./pages_05/image_editing.htm">IMAGE-EDITING</a></li>
      <li><a target="main_iframe" href="./pages_05/access_authority.htm">ACCESS-AUTHORITY</a></li>
      <li><a target="main_iframe" href="./pages_05/create_file.htm">CREATE-FILE</a></li>
      <li><a target="main_iframe" href="./pages_05/hid.htm">HOST-INTRUSION-DETECTION</a></li>
      <li><a target="main_iframe" href="./pages_05/move_obelix.htm">MOVE-OBELIX</a></li>
      <li><a target="main_iframe" href="./pages_05/colorpalette.htm">COLORPALETTE</a></li>
      <li><a target="main_iframe" href="./pages_05/download_depot.htm">DOWNLOAD-DEPOT</a></li>
      <li><a target="main_iframe" href="./pages_05/routine_check.htm">ROUTINE-CHECK</a></li>
    </ul>
  </aside>
  <main> 
    <iframe name="main_iframe" src="./pages_05/home.htm" width="910" height="590">INFO: I-FRAMES UNSUPPORTED</iframe>
  </main>
  <footer class="clear">
    <p class="center">Welcome to Obelix v. 3.1.0 - Tuesday, 07.03.2023 - 09:24:07 - Berechnungszeit (PHP-Server): 0.0003 Sekunden</p>
  </footer>
</div>
</body>
</html>

Datei: home.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Titel der Seite</title>
<script type="text/javascript">
<!-- hide

function stoperror() {
  return true;
}
window.onerror=stoperror;
//-->
</script>
<style type="text/css">
body {
  margin:10px 15px 15px 10px;
  font-family: sans-serif;
  background-color:#FFFFFF;
  color:#000000;
}

#wrapper {
  display: block;
  justify-content: center;
}

header {
  display: flex;
  justify-content: center;
}

main, footer {
  display: block;
  justify-content: left;
}

h1 {
  font-family: sans-serif;
  font-size: 18px;
  text-align: center;
  color: #0050A0;
}

h2 {
  font-family: sans-serif;
  font-size: 14px;
  text-align: left;
  color: #0050A0;
}

p { font-size: 12px; }

</style>
</head>
<body>
<div id="wrapper">
  <header>
    <h1>HOME</h1>
  </header>
  <main>
    <article>
      <h2>Titel des Artikels 1 - HOME</h2>
      <p>Haupttext des Artikels 1 Haupttext des Artikels 1 Haupttext des Artikels 1 Haupttext des Artikels 1</p>
    </article>
    <article>
      <h2>Titel des Artikels 2</h2>
      <p>Haupttext des Artikels 2 Haupttext des Artikels 2 Haupttext des Artikels 2 Haupttext des Artikels 2</p>
    </article>
  </main>
  <footer>
    <p>&nbsp;</p>
  </footer>
</div>
</body>
</html>

==============================================================================================
06: BILDERGALERIE MITTELS IFRAME

Die Bildergalerie besteht aus einer HTML-Hauptseite in die 2 Iframes eingebettet sind. Im
linken Iframe befinden sich die verkleinerten Vorschaubilder der Bildergalerie. Im Iframe
rechts daneben befindet sich der Hauptbereich der Bildergalerie, der mittels Javaskript
gesteuert wird (siehe: Beispiel -> Verzeichnis pages_06 und Seitenquelltext).

==============================================================================================
07: WEBSEITE MIT BILDERN

Bilder kann man mit dem alleinstehenden Tag img in einer Webseite einfuegen. Nach dem img-Tag
wird kein Zeilenumbruch eingefuegt. Im img-Tag muessen mindestens das src- und das alt-Attribut
eingetragen sein (siehe: Beispiele -> Verzeichnis pages_07 und Seitenquelltext).
Die alternative Beschreibung (alt="frei waehlbare Information") wird immer dann verwendet, wenn
das Bild nicht geladen oder angezeigt werden kann.
Das title-Attribut (title="frei waehlbare Information") wird angezeigt, wenn der Mauszeiger
ueber dem Bild stehen bleibt.
Das width- und height-Attribut sorgt dafuer, dass der Browser die Webseite schneller aufbauen
kann. Waehrend des Aufbaus der Webseite, kann durch diese Angaben (width="1024" height="768")
schon eine reservierte Freiflaeche fuer die Bilder vorgesehen werden. Diese Angaben erlauben
dem Browser die Webseite beschleunigt aufzubauen.

Beispiel:
<img src="../../images/bluehorse_10.jpg" width="1024" height="768" title="frei w&auml;hlbare Information" alt="frei w&auml;hlbare Information">

07.1: WEBSEITE MIT BILDERN AUF EINER SEITE

07.2: WEBSEITE MIT BILDERN AUF MEHREREN SEITEN (IFRAME)

==============================================================================================
08: WEBSEITE MIT VIDEOS (IFRAME)

Zwischen dem Video-Tag kann man mehrere Video-Formate angeben. Der Browser zeigt dann das
erste ihm bekannte Video-Format an. Alle Videos muessen natuerlich im angegebenen Dateipfad
zu finden sein.

siehe: Beispiel -> Verzeichnis pages_08 und Seitenquelltext

Datei: subtitle_de.vtt

1
00:00:01.000 --> 00:00:05.000
Die <i>erste Zeile</i> Text wird in den ersten 4 Sekunden angezeigt.

2
00:00:06.000 --> 00:00:16.000
Die <strong>zweite Zeile</strong> wird jetzt angezeigt.

Hinweis: Die Untertitel funktionieren nicht mit jeden Browser (einfach ausprobieren).

Datei: video_02.htm

<!DOCTYPE html>
<html>
<head>
<title>Video 2</title>
<meta charset="UTF-8">
<style type="text/css">
body {
  margin: 0px;
  padding: 0px;
  font-family: Arial, sans-serif;
  font-size: 0.95em;
}

video {
  border-style: none;
}

</style>
</head>
<body>
  <video preload="auto" width="980" controls autoplay>
    <source src="../videos/BlackPink-2020.mp4" type="video/mp4">
    <track src="../videos/subtitle_de.vtt" kind="subtitles" srclang="de" label="Deutsch">
    <source src="../videos/BlackPink-2020.ogv" type="video/ogg">
    <source src="../videos/BlackPink-2020.webm" type="video/webm">
    INFO: VIDEO-TAG UNSUPPORTED
  </video>
</body>
</html>

weitere Attribute des Video-Tag: loop, muted

Anmerkung: Untertitel funktionieren aktuell nicht mit jeden Browser. Aktuell (2023)
untersuetzen die Browser Safari und Edge die Einblendung von Untertiteln.

==============================================================================================
09: WEBSEITE MIT AUDIO-DATEIEN (IFRAME)

Zwischen dem Audio-Tag kann man mehrere Audio-Formate angeben. Der Browser spielt dann das
erste ihm bekannte Audio-Format ab. Alle Audio-Dateien muessen natuerlich im angegebenen
Dateipfad zu finden sein.

siehe: Beispiel -> Verzeichnis pages_09 und Seitenquelltext

Datei: audio_02.htm

<!DOCTYPE html>
<html>
<head>
<title>Audio 2</title>
<meta charset="UTF-8">
<style type="text/css">
body {
  margin: 0px;
  padding: 0px;
  font-family: Arial, sans-serif;
  font-size: 0.95em;
}

audio {
  border-style: none;
}

</style>
</head>
<body>
  <audio preload="auto" controls autoplay>
    <source src="../audios/mlah_1989_004.mp3" type="audio/mpeg">
    <source src="../audios/mlah_1989_004.ogg" type="audio/ogg">
    <source src="../audios/mlah_1989_004.wav" type="audio/wav">
    INFO: AUDIO-TAG UNSUPPORTED
  </audio>
</body>
</html>

weitere Attribute des Audio-Tag: loop, muted

Anmerkung: Untertitel funktionieren aktuell nicht mit jeden Browser. Aktuell (2023)
untersuetzen die Browser Safari und Edge die Einblendung von Untertiteln (siehe auch:
08: WEBSEITE MIT VIDEOS (IFRAME)).

==============================================================================================
10: WEBSEITE MIT BILDLINKS (JAVASKRIPT)

siehe: Beispiel -> Verzeichnis pages_10 und Seitenquelltext

==============================================================================================
11: WEBSEITE MIT LINKS DIE UEBER JAVASKRIPT REALISIERTT WERDEN

siehe: Beispiel -> Verzeichnis pages_11 und Seitenquelltext

==============================================================================================
12: BEISPIEL-WEBSEITE -> SCHWARZER DONNER

siehe: Beispiel -> Verzeichnis pages_12 und Seitenquelltext

==============================================================================================
13: BEISPIEL-WEBSEITE -> AGROFORSTWIRTSCHAFT

siehe: Beispiel -> Verzeichnis pages_13 und Seitenquelltext

==============================================================================================
14. VALIDIERUNG (UEBERPRUEFUNG) DES HTML-CODES

 - Den geschriebenen HTML-Code kann man am einfachsten ueber die Webseite des W3-Consortium
  (W3C) validator.w3.org ueberpruefen.

   Auf dieser Webseite kann man fuer eine Ueberpreufung bestehende Webseiten angeben,
   HTML-Dokumente hochladen oder nur einfach HTML-Code kopieren und einfuegen.

 - Eine andere Moeglichkeit zur Ueberpruefung von HTML-Code ist der Aufruf des Seitenquelltextes
   mittels der Moeglichkeiten die einem der Internet-Browser zur Verfuegung stellt
   (Kontextmenue ueber die rechte Maustaste aufrufen). Im Browser Firefox erscheint
   fehlerhafter Code in einem Signalrot.

- Zusaetzlich kann man dem Browser Firefox auch ein entsprechendes aktuelles Add-on goennen.

==============================================================================================

Schlussbemerkung: Weiterfuerende Informationen findet man im Internet oder in entsprechender
guter Fachliterarur.

Viel Spasz!



