Lektion

„HTML“ (engl. Hypertext Markup Language) ist eine Auszeichnungssprache (Markup-Sprache), die das Basisgerüst für den elementaren Aufbau einer Website bildet.
Mit der Notation von Elementen aus HTML5, der aktuellsten Version, gewährleistet sie die ordnungsgemäße Verarbeitung/Interpretation von Website-Inhalten durch sämtliche Browser. HTML5 arbeitet mit einer vereinfachten Syntax und ermöglicht u.a. die Anwendung von Webapplikationen mit JavaScript und anderen, unterstützt die Einbindung von Vektorgrafiken und gewährleistet ein effizienteres Caching.
Mit HTML5 wurden zudem semantische Auszeichnungen eingeführt, die bestimmte Abschnitte bzw. Inhalte in einem HTML-Dokument („Dokument“ stellvertretend für eine Seite) genauer unterteilen, darunter u.a. <head> zur Kennzeichnung des Kopfbereichs, <footer> für den Fußbereich, <section> für einen bestimmten Abschnitt, <nav> für einen Navigationspunkt, <main> für den Hauptinhalt, <article> für einen geschlossenen Abschnitt, <address> für Kontaktinformationen sowie <picture> für Grafiken. Diese Kennzeichnungen müssen, mit Ausnahme von <html>, <head> und <body>, nicht zwingend im Quelltext notiert werden.
Im weiteren Verlauf dieses Kurses werden wir der Einfachheit halber anstelle von HTML5 stets die grundlegende Bezeichnung „HTML“ verwenden.

^{Randnotiz: Syntax = Regelsystem für Zeichenkombinationen}
^{Caching steht für „Zwischenspeichern“}
^{Semantik = Bedeutung von Zeichen und ihrer Beziehung untereinander}

Abbildung 14: DOM (Document Object Model) als Schnittstelle und zur Strukturierung von HTML- und XML-Dokumenten. In Anlehnung an (https://www.ionos.de/digitalguide/websites/web-entwicklung/was-ist-das-document-object-model-dom/, 20.03.2020)

Bei jedem Aufruf einer Website wird ihr gesamter Inhalt aus dem HTML-Markup über den im Browser integrierten Parser in der Reihenfolge gelesen, interpretiert und im Ausgabegerät als Output dargestellt, wie er im Quelltext notiert ist. Über HTML können lediglich die in den Elementen notierten Inhalte visuell dargestellt werden. Dies wird als „semantisches Markup“ bezeichnet. Umfangreichere Gestaltungen oder gar das eigenständige Ausführen von Programmieranweisungen sind nicht möglich. Hierfür benötigt es für die grafische Ausarbeitung entsprechende CSS-Anweisungen und für Funktionen einer Programmiersprache, wie PHP oder JavaScript.

Der Aufbau einer HTML-Website folgt folgendem schematischen Aufbau, wobei die elementaren Bestandteile des Quelltextes in grün eingefärbt sind, alle optionalen Elemente in schwarz.
Bitte achten Sie beim folgenden Beispiel sowie bei allen weiteren Notationen in diesem Kapitel auf jedes einzelne Element, um das Grundverständnis herstellen zu können.
(Hinweis: Sie können diesen Code per Copy-Paste in einen Texteditor einfügen, als test.html-Dokument abspeichern und diese Datei dann über den Browser öffnen.
Achten Sie jedoch darauf, dass Sie unsere Erklärungen (← …) nicht mitkopieren.
Weiterhin müssen Sie beachten, dass Grafiken, die wir in diesem und den folgenden Notationen eingebunden haben, bei Ihnen nicht angezeigt werden, da sie schlichtweg auf Ihrem Rechner fehlen.
Um dies zu verhindern, benennen Sie eine Grafik Ihrer Wahl in beispielgrafik.jpg und speichern Sie diese exakt in dem Ordner, in welchem Sie auch die test.html-Datei speichern.
Zuletzt weisen wir darauf hin, dass wir Erläuterungen teilweise direkt in den Quellcode eingefügt haben, die Sie somit beachten sollten.)

^{Randnotiz: Mittels CSS lassen sich Webinhalte bzw. -layouts grafisch gestalten}
^{Der Quelltext einer Website kann im Browser durch einen Rechtsklick und per Klick auf „Seitenquelltext anzeigen“ o.ä. oder in Windows per Strg + U aufgerufen und eingesehen werden}

Das nachfolgende Grundgerüst können Sie hier zum Üben downloaden

<!DOCTYPE HTML> ←kennzeichnet den Dokumententyp, hier HTML(5) ( obligatorisch)
<html> ←einleitendes HTML-Tag (obligatorisch)
<head> ←Kennzeichnung des Kopfbereichs (obligatorisch)
<meta charset=”utf-8″> ←meta-Tag, hier charset für Zeichensatz sowie utf-8 für einen Standardsatz
<title>Titel der Website</title> ←title, Ausgabe in Browserzeile, bei Lesezeichen und in Suchmaschinen
</head> ←abschließendes Head-Tag (obligatorisch)
<body> ←einleitendes Body-Tag (obligatorisch)
<div id=”obererbereich”> ←einleitendes div-Tag für einen Block-Container für Fließtext; id als „Identifier“ für diesen Container
<h1>Überschrift 1</h1> ←h1, Überschrift 1 und abschließendes Tag
<h1>Überschrift 2</h1> ←h1, Überschrift 2 und abschließendes Tag
</div> ←abschließendes div-Tag
<div id=”inhalt”>
<section><p>Beispielhafter Text zu einem bestimmten Webseitenthema,<br>wobei hier eine neue Zeile beginnt ←einleitendes section-Tag für einen Abschnitt, einleitendes p-Tag für einen Absatz, br für einen Zeilenumbruch
<!– auskommentierter Text, der in der Ausgabe nicht angezeigt wird –></p> ←abschließendes p-Tag
<ul> ←einleitendes ul-Tag für den Beginn einer unsortierten Aufzählung (unordered list)
<li> ←einleitendes li-Tag für einen Aufzählungspunkt (list-item)
<a href=”https://www.beispieldomain.de/”>Website</a> ←einleitendes a-Tag für eine Verlinkung mit Angabe der Verweis-URL (href), des Linktexts und abschließendes a-Tag
</li> ←abschließendes li-Tag
</ul> ←abschließendes ul-Tag
<picture> ←einleitendes picture-Tag als semantische Auszeichnung für einen Folgeinhalt mit Grafik
<img src=”beispielgrafik.jpg” alt=”Titel des Bildes” width=”150″ height=”294″ /> ←einleitendes img-Tag für eine Grafik und Angabe einer Quelle (src (source)), Vergabe einer Beschreibung mit alt, Festlegung Breite mit width und der Höhe mit height und Abschluss, hier bei Grafiken mit />
</picture> ←abschließendes picture-Tag
<ol> ←einleitendes ol-Tag für eine nummerierte Aufzählung (order list)
<li>Aufstehen</li>
<li>Duschen</li>
<li>Frühstücken</li>
</ol> ←abschließendes ol-Tag
</section> ←abschließendes section-Tag
</div>
<footer> ←Kennzeichnung des Fußbereichs
<p>Copyright 2024</p> ←einleitendes und abschließendes p-Tag für einen Blocksatz
</footer> ←abschließendes footer-Tag
</body> ←abschließendes body-Tag
</html> ←abschließendes html-Tag

Ausgabe (1) im Browser (Ansehen):

Den Kopf bildet mit <!DOCTYPE HTML> die sog. „Dokumenttypangabe“, die dem Browser mitteilt, welche Markup-Sprache (hier HTML5) verwendet werden soll.

Darunter wird die äußerste Ebene über die <html></html>-Elemente referenziert.
Der Kopfbereich <head></head> markiert den Kopfbereich, dessen Inhalte i.d.R. in der Frontend-Darstellung nicht angezeigt werden. In diesem werden vorrangig Informationen an den Server sowie an Suchmaschinen übergeben, aber auch Skripte, z.B. JavaScript-Code und CSS-Angaben notiert. Mit der Benennung von utf-8 (USC Transformation Formats) in einem meta-Tag aus unserem obigen Quellcode teilen wir dem Browser mit, dass er diesen standardisierten Schriften- und Zeichencodierungssatz verwenden soll.

^{Randnotiz: Der US „Unicode Standard“ umfasst so gut wie alle Satzzeichen, Zeichen und Symbole der Welt}

Alle Elemente, die innerhalb von <body></body> notiert werden, erzeugen im Browser einen visuellen Output.
(Hinweis: Die Elemente <!DOCTYPE HTML> <html>, <head>, <meta charset=”utf-8″>, </head>, <body>, </body> und </html> bilden das Grundgerüst einer HTML-Website. Sollten Sie die weiterführenden Notationen in diesem Studienskript in einen Editor einfügen, achten Sie bitte darauf, dass Sie in Ihrer test.html-Datei stets dieses Grundgerüst verwenden.)

Ein HTML-Element besteht aus den sog. „Tags“, wie <table> und </table>, die kleingeschrieben werden und in den meisten Fällen über eine Anfangs- und Endmarkierung verfügen müssen. Zwischen dem Anfang und Ende bestimmter Tags kann entsprechender Inhalt notiert werden. Ausnahmen hierzu bilden spezifische Tags, die keine weitere Endung benötigen, z.B. <br> für einen Zeilenumbruch, <hr> für eine horizontale Linie sowie <img>, welches mit /> einen differenzierten Abschluss bildet. HTML-Elemente lassen sich teilweise untereinander verschachteln, u.a. mit Ausnahme von <h1></h1>– bis <h6></h6>-Überschriften, <head></head> und <body></body>. Innere Elemente einer Verschachtelung müssen stets innerhalb des übergeordneten Elements über eine Endmarkierung abgeschlossen werden, hier am Beispiel eines weiteren Quelltexts, der innerhalb einer Tabelle(nspalte) eine weitere Tabelle (in grün) enthält. Bitte beachten Sie zugleich weitere Tags, die wir hierüber abbilden.

<table id=”tabelle1″> ←einleitendes table-Tag für eine Tabelle, über id mit einer Namenszuweisung (tabelle1)
<tr> ←einleitendes tr-Tag für eine Tabellenzeile (table row)
<th>Kopfbezeichnung</th> ←einleitendes und abschließendes th-Tag für einen Tabellenkopf/Kopfzeile (table head)
</tr> ←abschließendes tr-Tag
<tr> ←Beginn einer neuen Zeile
<td>Inhalt der Tabellenspalte, z.B. Text<br> ←einleitendes td-Tag für eine Tabellenspalte (table data)
   <table id=”untertabelle1″>
   <tr>
   <td><p>Inhalt, z.B. <strong>Text</strong></p> ←einleitendes und abschließendes strong-Tag für eine Fettmarkierung
   <p title=”try it” lang=”de”>Mouse-Action</p> ←title- Attribut (Titel) mit Wert „try it“ sowie über lang (language) die Kennzeichnung einer Sprache des Textes, hier =“de“ für Deutsch
   </td> ←abschließendes td-Tag
   </tr>
   </table> ←abschließendes table-Tag
</td>
</tr>
<tr>
<td colspan=”2″>Spalte A und Spalte B vereint</td> ←colspan-Attribut (deutsch: Spalte überspannen), welches hier mit =“2“ zwei Spalten zu einer einzigen verbindet
<td>Spalte C wird hingegen regulär dargestellt</td>
</tr>
</table>

Ausgabe (2) im Browser (Ansehen):

Falsch hingegen (in rot) wäre eine Verschachtelung an diesem Beispiel:

<body>
<p>Textelement</p>
   <body>
   <p>Weiteres Textelement</p>
   </body>
<p>Das ist ein einfacher <strong>Text,</p>
<p>der das strong-Tag zwar falsch</strong> verschachtelt hat, aber der Browser zeigt es dennoch (großzügiger Weise) korrekt an.</p>
</body>

Ausgabe (3) im Browser (Ansehen):

Attribute führen bestimmten HTML-Elementen, die in der derzeit gültigen HTML-Spezifikation verzeichnet sind, unterschiedliche Wertzuweisungen zu. Sie werden über die Bezeichnung des Attributs, gefolgt von einem Gleichheitszeichen (=) und dem in Anführungsstrichen gesetzten Wert gebildet. Ihre Notation erfolgt stets vor der abschließenden Klammer der Anfangsmarkierung. Mehrere Attribute werden dabei über ein Leerzeichen voneinander getrennt. Beispiele für Attribute mit entsprechenden Werten sind (in grün)
<img src=”grafik.jpg” alt=”bezeichnender Text für diese Grafik” />,
<p lang=”de”></p> oder <div id=”navigation”></div>.

Mittels des Attributs id wird Elementen ein spezifischer Name zugeordnet, um deren Zweck und Positionierung im codierten Seitenaufbau besser nachvollziehen zu können

Generell bestehen Elemente in HTML zum einen aus sog. „Blockelementen“, wie beispielsweise <div></div> (für Bereich) , <p></p> (für Absatz), <h1></h1> bis <h6></h6> (für Überschriften), <ul></ul> (für eine Aufzählungsliste) und <li></li> (für ein Listenelement), die im Output einen neuen Absatz bzw. eine neue Zeile beginnen und zum anderen aus den sog. „Inline-Elementen“, beispielsweise <strong></strong> (für Fettschrift), <span></span> (für frei definierbaren Text), <img /> (für eine Grafik), <a></a> (für einen Link) und <button></button> (für eine Schaltfläche), die im Textfluss selbst sowie in Blockelementen notiert werden.
Ein Beispiel für die Unterscheidung von Blockelementen (in grün) sowie Inline-Elementen (in blau):

<body>
<p>Text 1, der als eigenständiger Absatz dargestellt wird</p>
<p>Text 2, der einen weiteren eigenständigen Absatz bildet</p>
<ul>
<li>Liste, die über einen eigenständigen Absatz dargestellt wird</li>
<li><span><strong>weiterer Listenpunkt</strong></span></li>
<li><img src=”beispielgrafik.jpg” /></li>
<pre>Text, der als eigenständiger Absatz dargestellt wird und 1:1 so aus dem Editor ausgegeben wird, inklusive von ←pre-Tag (preformated (präformatiert))
<strong>eigenen Elementen</strong></pre>
</ul>
</body>

Ausgabe (4) im Browser (Ansehen):

Man beachte bei diesem Beispiel die Anwendung des Verschachtelungsprinzip bei der mehrfachen Verwendung von Inline-Elementen (hier beginnendes <span>, beginnendes <strong>, abschließendes </strong>, abschließendes </span>).
Blockelemente nehmen im Output die gesamte Breite des verfügbaren Monitors ein und in der Höhe den Platz, der für die gesamte Darstellung notwendig ist. Diese Breite lässt sich durch einen erzwungenen Textumbruch mittels <br> verändern.