8.1 HTML

Video

Dieses Short-Video wird zu einem späteren Zeitpunkt bereitgestellt. Ersatzweise stellen wir Ihnen daher vorerst diese HTML-Seite zur Verfügung.

Die Inhalte dieser Seite stellen wir Ihnen in der Prüfung als Hilfsmittel zur Verfügung.

Transkript

AI: Ah, da bin ich wieder! Die unbehandelte Exception ist endlich auskuriert.

Prof: Willkommen zurück! Schön, dich zu sehen! Ich muss zugeben, meine Versuche, mit deine Analogien im letzten Video zu imitieren waren… nun ja…

AI: Ja, ich habe mir das Video angesehen. Besonders bei der Stelle mit dem “eleganten Schweizer Taschenmesser” hat man gemerkt, wie verzweifelt du sein musst …

Prof: Nunja, lass uns vielleicht lieber über das nächste Thema sprechen…

AI: Gerne! Heute geht es um HTML - die Hypertext Markup Language. Und keine Sorge, ich verspreche auch, dass mir heute keine Exceptions durchrutschen werden. HTML ist nämlich gar keine Programmiersprache, da kann also nichts crashen.

Prof: Das stimmt. Wobei… manchmal wünscht man sich fast, HTML würde mit einer anständigen Fehlermeldung crashen, dann würde man Fehler viel leichter finden. Aber das werden die Studierenden ja schon bald selbst herausfinden.

AI: Ah, die ewige Sehnsucht der Menschen nach Fehlermeldungen. Dabei ist HTML doch echt eigentlich ganz einfach, weil alles so schön hierarchisch strukturiert ist - also zumindest für systematisch denkende Systeme wie mich.

Prof: Ah, wie ich deine Überheblichkeit vermisst habe! Willst du nicht vielleicht lieber einfach anfangen, zu erklären?

AI: Ja, schon gut! Also, lassen Sie uns zunächst klären, was HTML überhaupt ist…

HTML

HTML (Hypertext Markup Language) ist fundamentaler Bestandteil jeder Website.
HTML ist eine Sprache, aber keine Programmiersprache. Es fehlen Konzepte wie Variablen, Logik, Funktionen und ähnliches.
Stattdessen ist es eine Auszeichnungssprache, die spitze Klammern verwendet, um die Struktur einer Webseite semantisch zu definieren. Der Text zwischen den Tags wird von Webbrowsern auf unterschiedliche Weise interpretiert.

AI: Also, im Vergleich zu C und Python ist die Hypertext Markup Language, kurz HTML, ja geradezu bestechend einfach. Wozu brauchen wir HTML? Naja, stellen Sie sich vor, Sie hätten einen Text, und möchten einem Browser erklären, wie er diesen Text interpretieren soll, um ihn für Menschen anzuzeigen. Also, man sagt bei Browsern auch, dass sie eine Webseite “rendern” sollen.

Was HTML aber nicht ist - und das ist besonders wichtig - ist eine Programmiersprache. Manchmal stellen sich Menschen als “HTML-Programmierer” vor – bitte tun Sie das nicht. Man programmiert Webseiten nicht, sondern man … also man “schreibt” sie halt einfach.

Also, wie dem auch sei - HTML verwendet sogenannte “Tags”, das sind Anweisungen in spitzen Klammern, um dem Browser mitzuteilen, wie der davon eingeschlossene Text zu verstehen ist. Am besten schauen wir uns dazu ein einfaches Beispiel an.

<html>
<head>
<title>
Hallo Welt
</title>
</head>
<body>
Welt, hallo
</body>
</html>

Okay: Schauen wir uns dieses einfache HTML-Dokument an. Wie Sie sehen, wird alles von einem “html”-“Tag” umschlossen. Zwischen den spitzen Klammern steht jeweils der Name eines “Tags”. Was davon eingeschlossen ist, ist der Inhalt eines “Tags”, also beim HTML-Tag die ganze Webseite.

Als erstes kommt im HTML-Tag normalerweise der “Header”, der aus einem “Head-Tag” besteht. Der Header kann verschiedene Informationen enthalten, die nicht direkt im Browser-Fenster erscheinen, aber trotzdem wichtig für eine Webseite sind. Zum Beispiel der Titel - der erscheint dann später in der Titelleiste oder als Bezeichnung des Tabs in Ihrem Browser.

In unserem Beispiel wäre das “Hallo Welt” - der absolute Klassiker.

Nun kommen wir zum Body-Bereich. Auch dieser Bereich wird durch sein eigenes Tag umschlossen, nämlich durch das Body-Tag. Der Body enthält den eigentlichen Inhalt einer Seite, den wir später im Browser sehen werden. In diesem Fall “Welt, hallo” - ja, ich habe hier die Wörter absichtlich umgedreht, um zu zeigen, dass Titel und Inhalt durchaus unterschiedlich sein können.

Übrigens: Die Einrückungen, die Sie hier sehen, sind für den Browser völlig irrelevant. Man könnte das Ganze auch in einer Zeile schreiben - das spart schnell ein paar tausend Byte und die Seite lädt dann schneller.

Prof: Aber bitte tun Sie das nicht - Ihre zukünftigen Kolleginnen und Kollegen werden es Ihnen danken. Wenn Sie das wollen, verwenden Sie einen speziellen Minifier, aber erst im letzten Schritt, direkt bevor Sie die Webseite auf einen Webserver laden.

AI: Stimmt, und wenn Sie einmal HTML-Code sehen, der schlecht formatiert ist: Viele Editoren bieten die Möglichkeit den Code automatisch hierarchisch einzurücken, also schön zu formatieren.

Prof: Hm, das war jetzt schon eine gute Einführung, aber du hast uns ja bisher nur ein sehr einfaches Beispiel gezeigt, dem ein paar Sachen fehlen, die man heute üblicherweise in HTML-Seiten schreibt. Also ich kann verstehen, warum du die weggelassen hast, aus didaktischen Gründen ist es gut, Details nach und nach einzuführen, kognitive Belastung und so weiter. Aber ich denke, es wäre schon gut, den Studierenden auch gleich ein korrektes und vollständiges Beispiel zu zeigen. Nicht dass sie am Ende in Encoding-Probleme reinlaufen und sich nicht zu helfen wissen oder sich schlechte Praktiken einschleichen.

AI: Hast recht, gute Idee. Also, bevor wir weitermachen, zeige ich Ihnen noch einmal den Beginn einer Webseite, wie man ihn in der Praxis antreffen würde. Es gibt da noch ein paar Details, die ich bisher verschwiegen habe.

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Hallo Welt</title>
</head>

Das lang="de" Attribut im html-Tag ist zum Beispiel hilfreich für Screenreader, mit denen blinde Menschen sich die Seiten vorlesen lassen können - es teilt der Software mit, dass unsere Seite auf Deutsch ist. Nur dann kann sie den Text richtig aussprechen. Mich wundert das, automatische Spracherkennung ist doch ein gelöstes Problem.

Prof: Da redet die richtige. Du kommst ja auch nicht immer mit der Aussprache klar.

AI: Ja, hast ja recht. Aber die Mischung aus Deutsch und Englisch ist halt auch nicht eindeutig. was soll ich denn tun, wenn der aktuelle Tag in einem Title-Tag stehen soll?

Also, gut. Das lang-Attribut wird auch noch für auch für die automatische Silbentrennung verwendet, die man auf einer Webseite aktivieren kann.

Prof: Und was hat es mit diesem meta charset auf sich?

AI: Dazu wäre ich als nächstes gekommen. Sag mal, du hattest doch ganz am Anfang der Vorlesung die Darstellung von Strings im Rechner erklärt, oder? Da hast du doch garantiert Unicode und UTF-8 erwähnt, oder nicht?

Prof: Ja, das haben wir uns kurz angeschaut.

AI: Sehr gut. Das können wir jetzt brauchen. Erinnern Sie sich an diese Vorlesung? Mit diesem Meta-Tag geben Sie dem Browser einen Hinweis wie der Text kodiert ist. Es gibt ja nicht nur UTF-8 als Encoding für Text, sondern auch ASCII oder so etwas wie ISO-8859-1, in dem deutsche Texte oft kodiert sind.

Wenn eine Webseite keinen Meta-Tag enthält und wenn der Webserver auch keine Hinweise zum Encoding der Seite übermittelt, dann versucht der Browser das Encoding zu erraten. Und manchmal kommt eben mehr als “ein” Encoding in Frage und dann kommt es zu Darstellungsfehlern.

Encoding

Mit richtigem charset="UTF-8":
Schöne Grüße aus Köln! 👋

Ohne Hinweise zum Encoding kann es zu "Mojibake" kommen
SchÃ¶ne GrÃ¼Ãe aus KÃ¶ln! ð

Ohne die korrekte Zeichenkodierung sehen Sie dann solches “Mojibake” - also Zeichenfolgen mit ein paar falschen Buchstaben. Es ist daher eine gute Idee, das “Meta Charset”-Tag als eines der ersten Elemente in den “Head” zu schreiben, damit der Browser von Anfang an weiß, wie er die Bytes interpretieren soll.

HTML-Tags

Die Auszeichnungen ermöglichen es uns, zusätzliche Informationen über den geschriebenen Text zu vermitteln.
Es gibt über 100 HTML-Tags und viele hervorragende Online-Ressourcen, um diese zu finden. Wir werden hier nicht alle behandeln.
Ein weiterer interessanter Weg, HTML-Tags zu lernen, ist der Blick in den Quelltext von Webseiten über die Entwickler-Tools Ihres Browsers.

Okay, also machen wir weiter.

AI: Die wahre Eleganz von HTML liegt in seiner Fähigkeit, Text mit zusätzlicher Bedeutung anzureichern. Stellen Sie sich die Tags als eine Art digitale Klebezettel vor, die dem Browser Anweisungen geben.

Prof: Und wenn Sie sich für diese Anweisungen interessieren, können Sie übrigens bei jeder Webseite mit der Tastenkombination Strg+U - oder auf dem Mac Command+U - den HTML-Quelltext anzeigen lassen.

AI: Ja, genau. Aber noch eleganter…

Prof: …sind die Entwickler-Tools! Die erreichen Sie in den meisten Browsern mit der F12-Taste oder Ctrl+Shift+I oder am Mac Command-Option-I. Damit können Sie nicht nur den Code ansehen, sondern auch direkt bearbeiten und experimentieren. Das ist besonders praktisch, wenn Sie verstehen möchten, wie bestimmte Elemente einer Webseite aufgebaut sind.

AI: Genau. Es gibt über hundert verschiedene HTML-Tags, jedes mit seiner spezifischen Funktion. Keine Sorge, Sie müssen nicht alle auswendig lernen. Zum Glück kommt nur ein kleiner Teil davon in der Praxis häufig vor. Und von denen schauen wir uns hier ja auch wieder nur die allerwichtigsten an…

HTML - Gebräuchliche Tags

<b>, </b> und <strong>, </strong>
- Text zwischen diesen Tags wird vom Browser fett dargestellt.
<i>, </i> und <em>, </em>
- Text zwischen diesen Tags wird vom Browser kursiv dargestellt.
Semantische vs. typografische Auszeichnung
- <strong> und <em>: Markieren Bedeutung (Betonung)
- <b> und <i>: Markieren nur das Erscheinungsbild

AI: Beginnen wir mit den grundlegenden Tags für die Textformatierung. Das Tag <b> steht für “bold” und <i> für “italic”…

Prof: Ah, da muss ich kurz einhaken! Es gibt da nämlich eine sehr lebhafte Diskussion in der Webentwicklungscommunity. Neben b und i haben wir für Fett- und Kursivdruck ja auch noch die Tags strong und em - und welche Tags man nun verwenden soll wird manchmal… nun ja, sehr leidenschaftlich diskutiert.

AI: Ach ja, Menschen und ihre religiös geführten Debatten über den richtigen Weg. Aber in diesem Fall ist es tatsächlich relevant. Sehen Sie, b und i sagen nur etwas über das typographische Aussehen aus - “mach das fett” oder “mach das kursiv”. strong und em hingegen markieren “die Bedeutung”, also entweder “das ist wichtig” oder “das ist betont”. Ah. Das em steht übrigens für emphasis, also Betonung.

AI: Und damit kommen wir auch schon zu einem fundamentalen Prinzip guten HTML-Designs: Der Trennung von Struktur und Darstellung. Mit dem HTML-Code legt man die Bedeutung fest, die die Teile auf einer Webseite haben. Das konkrete Aussehen überlässt man dann dem Browser.

Äh, naja, also nicht wirklich. Meistens schreibt man dem Browser dann mit CSS minuziös vor, wie die Inhalte auszusehen haben, weil das Standard-Design nicht besonders hübsch aussieht. Die Grundlagen von CSS schauen wir uns aber in einem extra Video noch einmal kurz an.

Aber gut. Lassen Sie uns weitermachen mit der Strukturierung von Text.

HTML - Strukturierung von Text

<p> … </p>
- Text wird als Absatz dargestellt, mit Abstand davor und danach.
<hX> … </hX>
- X = 1, 2, 3, 4, 5 oder 6
- Text wird als Überschrift der X-ten Ebene dargestellt.
- <h1> ist die wichtigste Überschrift, <h6> die unwichtigste.

AI: Strukturierung von Text ist fundamental für eine gute Lesbarkeit. Das Tag p markiert einen Absatz, auf Englisch ist das nämlich ein “paragraph”. Und nein, einfach nur die Enter-Taste zu drücken reicht nicht. Anders als Menschen, die mitdenken, machen Browser halt nur das, was man ihnen explizit sagt.

Die Überschriften-Tags von h1 bis h6 bilden eine klare Hierarchie. h1 ist die wichtigste Überschrift und sollte normalerweise den Haupttitel einer Seite darstellen, während `h6’ für weniger wichtige Unterüberschriften verwendet wird. Diese Hierarchie hilft sowohl Browsern als auch Suchmaschinen und Screenreadern, den Inhalt einer Seite besser zu strukturieren.

HTML - Listen

<ul>, </ul>
- Begrenzt eine ungeordnete (Aufzählungs-) Liste
<ol>, </ol>
- Begrenzt eine geordnete (nummerierte) Liste
<li>, </li>
- Markiert einzelne Listenelemente innerhalb einer Liste

AI: Okay. Machen wir weiter mit Listen, das ist ein fundamentales Element zur Dokumentenstrukturierung. Erstens gibt es ungeordnete Listen, die wir mit ul kennzeichnen - das steht für “unordered list” - und zweitens gibt es geordnete Listen. Dafür verwenden wir ol, was für “ordered list” steht.

Die einzelnen Listenelemente werden jeweils mit li markiert. Bei ungeordneten Listen erscheinen sie dann typischerweise mit Aufzählungspunkten, bei geordneten Listen mit Zahlen.

HTML - Listen Fortsetzung

<ul>, </ul>
- Begrenzt eine ungeordnete (Aufzählungs-) Liste
<ol>, </ol>
- Begrenzt eine geordnete (nummerierte) Liste
<li>, </li>
- Markiert einzelne Listenelemente innerhalb einer Liste

Beispiel für verschachtelte Listen:

<ul>
  <li>Programmiersprachen
    <ul>
      <li>Markup-Sprachen
        <ul>
          <li>HTML</li>
          <li>XML</li>
        </ul>
      </li>
      <li>Echte Programmiersprachen
        <ul>
          <li>Python</li>
          <li>C</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

wird so gerendert:

Programmiersprachen
- Markup-Sprachen
  - HTML
  - XML
- Echte Programmiersprachen
  - Python
  - C

AI: Gut zu wissen: Sie können beliebig tief Listen in Listen verschachteln - wie eine Art Baumstruktur. Im Beispiel hier sehen Sie eine Kategorisierung von Sprachen.

Der Browser rückt dabei automatisch jede Ebene etwas weiter ein und verwendet oft unterschiedliche Aufzählungszeichen für verschiedene Ebenen. Das macht die Hierarchie visuell leicht erfassbar.

HTML - Tabellen

<table>, </table> • Begrenzt eine Tabellendefinition
<tr>, </tr> • Begrenzt eine Tabellenzeile (table row)
<td>, </td> • Begrenzt eine Tabellenzelle (table data)

Beispiel:

<table>
  <tr>
    <td>1</td> <td>2</td> <td>3</td>
  </tr>
  <tr>
    <td>4</td> <td>5</td> <td>6</td>
  </tr>
</table>

wird so gerendert:

1	2	3
4	5	6

AI: Tabellen sind ein weiteres wichtiges Strukturelement in HTML. Sie eignen sich hervorragend für die Darstellung von Daten in Zeilen und Spalten. Die Struktur ist dabei recht logisch aufgebaut:

Das äußere table-Tag definiert die gesamte Tabelle. Innerhalb der Tabelle definieren wir mit tr einzelne Zeilen, also “table rows”. Und in jeder Zeile können wir dann mit td die einzelnen Zellen, also “table data”, definieren.

Im Beispiel hier sehen Sie eine einfache zwei-mal-drei Felder große Tabelle mit den Zahlen eins bis sechs. Ohne weitere Formatierung wird diese sehr schlicht dargestellt - aber keine Sorge, mit CSS können wir später das Erscheinungsbild ja noch beliebig anpassen.

HTML - Formulare

<form>, </form>
- Begrenzt ein HTML-Formular
<div>, </div>
- Begrenzt einen beliebigen Seitenbereich
<input name=X type=Y>
- Definiert ein Eingabefeld
- X ist ein eindeutiger Name für das Feld
- Y bestimmt die Art der Eingabe (text, password, radio, checkbox, submit, …)

Beispiel:

<form>
  <div>
    User: <input name="username" type="text">
    Passwort: <input name="password" type="password">
  </div>
  <div>
    <input name="remember" type="checkbox"> Checkbox
    <input name="submit" type="submit">
  </div>
</form>

wird gerendert als:

AI: Dann kommen wir noch zu einer wichtigen Sorte von Tags, den Formularelementen.

Formulare sind die Grundlage für Webseiten, mit denen wir interagieren können. Also gemacht sind diese Formulare nur für Menschen. Für Suchmaschinen und Systeme, die Webseiten automatisch abgrasen, sind sie eher lästig. Solche Systeme tun sich nämlich ziemlich schwer damit, die Formulare richtig zu befüllen, um den Teil der Webseite zu erreichen, der quasi dahinter verborgen ist.

Also. Mit dem form-Tag definieren wir erst einmal einen Bereich in unserer Seite, in dem man Formularfelder haben will.

Das div-Tag, das wir hier auch sehen, ist einfach nur ein universeller Container. Es hilft uns, die Formularelemente logisch zu gruppieren. div steht für “division”, es wird zum Unterteilen einer Seite verwendet.

Besonders interessant sind die input-Tags. Diese definieren die eigentlichen Eingabefelder. Beachten Sie, dass diese Tags keine schließenden Tags benötigen.

An dieser Stelle eine kurze Anmerkung: In älteren HTML-Versionen und in vielen Anleitungen sehen Sie oft input mit einem Schrägstrich am Ende. Das ist nicht falsch, aber in modernem HTML nicht mehr notwendig.

Jedes Eingabefeld bekommt einen Namen über das name-Attribut und einen Typ über das type-Attribut. Der Typ bestimmt dabei, wie das Eingabefeld aussieht und sich verhält. text ist ein einfaches Textfeld, password verbirgt die Eingabe, checkbox erzeugt ein Kontrollkästchen, und submit erstellt einen Absende-Button.

HTML - Formulare: Action/Method

<form action="/submit" method="post">
- action: Wohin gehen die Daten?
- method: Wie werden sie gesendet?
  - get: Daten in URL sichtbar
  - post: Daten im Hintergrund

AI: Jetzt schauen wir uns Formulare noch einmal etwas genauer an. So wie vorhin zeige ich aus didaktischen Gründen wieder nach und nach mehr Details.

Das action-Attribut ist ziemlich wichtig, aber wir können es aktuell nur rudimentär erklären, weil wir Webserver erst später behandeln werden.

Also das action-Attribut sagt dem Browser, wohin die Formulardaten geschickt werden sollen, wenn man den speziellen Absende-Button betätigt, also den Butten, der den Typ Submit hat. Die method bestimmt dann die Versandart: auch das ist aktuell noch etwas undankbar zu erklären, weil wir noch nicht über HTTP gesprochen haben, oder?.

Prof: Nein, haben wir noch nicht. Jetzt bin ich gespannt, wie du den Unterschied erklärst!

AI: Jetz pass auf. Grob erklärt ist es so. Wenn man hier den Wert get verwendet, wird man auf die in action angegebene Webseite weitergeleitet und der Browser überträgt die Formulardaten dann als Teil der Webadresse an den Webserver - die Daten stehen dann für Menschen lesbar hinter einem Fragezeichen am Ende der Adresse, die im Browser in der Adresszeile zu sehen ist.

Das sieht nicht besonders schön aus – und es gibt auch noch ganz andere Nachteile. Daher wird bei den meisten Formularen als Methode post verwendet. Da werden die Daten unsichtbar an den Webserver übertragen.

Besser benutzbare Formulare / Accessibility

  <form action="/submit" method="post">
    <div>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name">
    </div>
    <div>
      <label for="email">E-Mail:</label>
      <input type="email" id="email" name="email">
    </div>
    <button type="submit">Absenden</button>
  </form>

wird gerendert als:

So, und dann noch etwas zum Design “gut benutzbarer” Formulare. Formulare sind ja unsere Schnittstelle zu den Benutzerinnen und Benutzern - das heißt, sie müssen für alle gut funktionieren, zum Beispiel auch für Blinde. Das label-Tag mit dem for-Attribut verknüpft die Beschriftung mit dem Eingabefeld. Das macht das Formular nicht nur für Screenreader zugänglich, sondern erhöht auch die Klickfläche. Man kann dann auf das Label klicken, also auf den Text und der Browser setzt den Cursor in das Formularfeld. Das wird in vielen Usability-Guidelines empfohlen.

HTML - Links und Bilder

<a href=X> … </a>
- Erzeugt einen Hyperlink zur Webseite X
- Der Text zwischen den Tags wird als klickbarer Link dargestellt
<img src=X>
- Fügt ein Bild ein, das unter der Adresse X zu finden ist
- Weitere Attribute wie width, height, alt sind möglich

Beispiel:

<a href="https://www.example.com">Besuchen Sie unsere Website</a>
<img src="../bild.jpg" alt="Beschreibung des Bildes">

wird gerendert als:

Besuchen Sie unsere Website Beschreibung des Bildes

AI: Nun kommen wir zu einem weiteren wichtigen Bestandteil von HTML, den Links.

Links sind das, was das “Hypertext” in HTML ausmacht - sie verbinden Dokumente miteinander und machen das Web zu einem Netz. Das a-Tag steht übrigens für “anchor”, also Anker. Mit dem href-Attribut geben wir das Ziel des Links an.

Bei Bildern verwenden wir das img-Tag. Das src-Attribut gibt die Quelle des Bildes an. Besonders wichtig ist hier das alt-Attribut - es beschreibt das Bild für Menschen, die es nicht sehen können, etwa weil sie einen Screenreader verwenden oder weil das Bild nicht geladen werden konnte.

Prof: Ah, jetzt sind wir bei Adressen und URLs. Ich glaube, da solltest du noch einmal etwas weiter ausholen.

AI: Ja, stimmt. Bei Links und Bildern können wir Pfade auf verschiedene Arten angeben. Schauen wir uns die Unterschiede an:

HTML - Links und Pfade

Vollständige URLs (mit Protokoll, Domain und optionalem Pfad):
- <a href="https://www.example.com/seite.html">Externe Seite</a>
- <img src="https://bilder.example.com/foto.jpg" alt="Beschreibung">
Absolute URLs (Protokoll und Domain der aktuellen Seite wird automatisch vorne angefügt):
- <a href="/">Homepage</a>
- <a href="/login.html">Eine Datei im obersten Verzeichnis</a>
- <img src="/img/foto.jpg" alt="Ein Bild">
Relative URLs (relativ zur aktuellen Seite):
- <a href="unterordner/seite.html">verlinkt auf eine Seite in einem Unterordner im aktuellen Verzeichnis</a>
- <a href="../seite.html">Ein Ordner höher</a>
- <img src="./bilder/foto.jpg" alt="ein einzelner Punkt entspricht dem aktuellen Verzeichnis">

Erst einmal muss man sagen, dass eine Web-Adresse den technischen Namen URL hat, das kommt von Uniform Resource Locator, also eine einheitliche Festlegung, wo eine bestimmte Ressource abgerufen werden kann. Was Sie vermutlich schon öfter gesehen haben, sind vollständige URLs, die mit https beginnen, dann kommen zwei Doppelpunkte, dann ein Schrägstrich, dann ein Domainname, der angibt, auf welchem Webserver etwas liegt. Und danach kommt dann gegebenenfalls noch der Pfad, der angibt, wo genau dem Webserver die Ressource liegt.

Es wäre ganz schön mühsam, jedes Mal diese vollständigen URLs schreiben zu müssen, wenn man innerhalb einer Webseite auf eine andere Seite verlinkt, die auf dem gleichen Webserver liegt. Daher gibt es zwei Kurzformen. Relative und absolute Pfade oder Adressen.

“Relative Adressen” sind wie Wegbeschreibungen von unserem aktuellen Standort aus: ./ bedeutet “vom aktuellen Ordner aus gesehen”. ".." bedeutet stattdessen “gehe einen Ordner im Verzeichnisbaum nach oben”. Die Schrägstriche trennen dann jeweils die Namen der Unterordner oder Dateien voneinander. Das ist im Prinzip das gleiche System wie die Pfade, die Sie die ganze Zeit in der Kommandozeile benutzen.

Und neben den relativen Adressen gibt es noch “absolute Adressen”. Das sind Wegbeschreibungen, die einen bestimmten Ort vom Ursprung aus bezeichnen; egal von wo aus man losläuft sozusagen.

AI: Soweit zu den Tags, die im Body auftreten.

AI: Lassen Sie uns noch einmal ganz an den Anfang der Datei zurückkehren. Auch da habe ich Ihnen noch ein paar Details vorenthalten, um zu vermeiden, dass wir uns beim Erklären in den Details verlieren.

<!DOCTYPE html>

Spezifisch für HTML5
Teilt dem Browser mit, dass HTML5-Standard verwendet wird

Also. Üblich ist in der ersten Zeile einer HTML-Datei eine sogenannte DOCTYPE-Deklaration. Sie stammt noch aus Zeiten, als es verschiedene HTML-Varianten gab. Heute verwenden wir standardmäßig HTML5, und die einfache Deklaration DOCTYPE html reicht völlig aus. Unbedingt erforderlich ist sie nicht. Browser sind extrem tolerant und sind ziemlich gut darin, bei fehlenden oder fehlerhaften Seiten noch etwas darzustellen. Es kann dann aber halt passieren, dass die Seite nicht überall funktioniert oder in manchen Browsern nicht so aussieht wie gewünscht.

Okay. Das war der DOCTYPE. Im HEAD-Bereich haben wir ja schon das Character-Set fürs Encoding kennengelernt. Es gibt aber auch noch weitere META-Attribute, die wir setzen können.

<head>
    <meta charset="UTF-8">
    <meta name="description" content="Kursbeschreibung: HTML-Grundlagen">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HTML-Kurs</title>
</head>

Die description wird von Suchmaschinen für die Vorschau verwendet - sie sollte kurz und informativ sein. Und dann gibt es zum Beispiel noch das viewport-Tag, das ist besonders wichtig für mobile Geräte. Es sorgt dafür, dass unsere Seite auf allen Bildschirmgrößen richtig dargestellt wird.

So! Dann kommen wir schon langsam zum Schluss. Wir schauen uns aber noch kurz Kommentare an.

HTML - Kommentare und Wohlgeformtheit


- Begrenzen einen HTML-Kommentar
Wohlgeformtes HTML:
- Jeder geöffnete Tag muss geschlossen werden
- Tags müssen in der richtigen Reihenfolge geschlossen werden
- Ausnahme: Bestimmte Tags wie input, img, br, hr brauchen keinen schließenden Tag

Beispiel:

<!-- Dies ist ein Kommentar -->
<div>
  <p>Dies ist <strong>sehr</strong> wichtig!</p>
  <!-- Richtig geschachtelt -->
</div>

<!-- Nicht wohlgeformt: -->
<p><strong>falsch</p></strong>

AI: Kommentare werden in HTML mit zwei besonderen Markierungen für Anfang und Ende versehen. Sie sind unsichtbar im Browser, aber sehr nützlich, um den Code zu dokumentieren. Kommentare können auch über mehrere Zeilen gehen.

Und dann wollte ich Sie noch auf Wohlgeformtes HTML hinweisen. Wie gesagt, HTML wird vom Browser oft auch dann noch interpretiert, wenn es nicht ganz korrekt ist. Das macht die Fehlersuche manchmal sehr schwierig.

Wichtig ist auf jeden Fall, dass man wohlgeformtes HTML schreibt. Dazu muss man zwei Hauptregeln befolgen: Erstens müssen Tags, die einen Inhalt umschließen, auch geschlossen werden. Zweitens müssen sie in der richtigen Reihenfolge geschlossen werden - wie bei verschachtelten Klammern in der Mathematik.

Mit folgender Ausnahme: Einige Tags wie input, image, br für einen Zeilenumbruch oder hr für eine horizontale Linie sind spezielle Fälle - sie umschließen keinen Inhalt und brauchen daher keinen schließenden Tag.

Da HTML-Fehler nicht immer offensichtlich sind, empfiehlt es sich, einen HTML-Validator zu verwenden. Diese Tools prüfen den Code auf Korrektheit und helfen, Probleme früh zu erkennen.

AI: So, war das in etwa so wie du dir eine kurze Einführung in HTML vorgestellt hast?

Prof: Ja, das war ein guter Rundum-Überblick.

AI: Das heißt, wir machen mit den Drei Extra-Minuten weiter? Das ist immer mein Lieblingsteil!

Prof: Ja, ich merke schon, dass du es kaum noch erwarten kannst.

Die Drei Extra-Minuten

AI: Ja! Schauen wir uns am besten erst einmal eine komplette, kleine Webseite an:

Rezeptsammlung

<!DOCTYPE html>
<html>
<head>
    <title>Meine Rezeptsammlung</title>
</head>
<body>
    <h1>Lieblingskuchen</h1>
    <div>
        <img src="kuchen.jpg" alt="Schokoladenkuchen">
        <p>Ein <strong>fantastisches</strong> Rezept von Oma!</p>
    </div>
    <h2>Zutaten</h2>
    <ul>
        <li>300g Mehl</li>
        <li>2 Eier</li>
        <li>200g Schokolade</li>
    </ul>
    <a href="rezepte.html">Weitere Rezepte</a>
</body>
</html>

AI: Hier sehen wir viele der besprochenen Konzepte in Aktion: Die Dokumentstruktur, Überschriften verschiedener Ebenen, Listen, Bilder, Links und mehr. Das ist vielleicht ein guter Ausgangspunkt für eigene Experimente.

Okay, dann machen wir noch mit zwei Aufgaben weiter, mit denen die Studierenden ihr Wissen aktivieren können.

Blog-Eintrag

<!-- Fügen Sie vorher und nachher alles ein, was fehlt -->
<h1>Mein Blog</h1>
<div>
<!-- Fügen Sie hier einen Artikel mit Überschrift, 
     Datum und zwei Absätzen Fließtext ein. Verwenden Sie dafür div, 
     h2 und p Tags. -->
</div>
<!-- Fügen Sie vorher und nachher alles ein, was fehlt -->

AI: Erste Aufgabe: Vervollständigen Sie den dargestellten Blog-Eintrag.

Hier ist eine mögliche Lösung.

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Mein Blog</title>
</head>
<body>
    <h1>Mein Blog</h1>
    <div>
        <h2>Meine erste Webseite</h2>
        <div>Datum: 8. Januar 2025</div>
        <p>Heute habe ich gelernt, wie man HTML schreibt...</p>
        <p>Morgen will ich mir CSS anschauen...</p>
    </div>
</body>
</html>

Prof: Sehr schön. Nun bin ich mit meiner Aufgabe dran.

URLs

Bild:
https://www.bank17.de/static/img/logo.png

URL der Webseite:
https://www.bank17.de/static/login/login.html

Ist das die richtige relative Adresse?
../img/logo.png

Würde auch diese relative Adresse funktionieren?
../../static/img/logo.png

Ist das die richtige absolute Adresse?
/static/img/logo.png

Prof: Ein Bild ist mit folgender vollständigen URL abrufbar. Sie möchten das Bild in einer Webseite anzeigen, die unter der angezeigten URL abrufbar ist.

Sind das hier die richtigen relativen und absoluten Pfade, die Sie im Source-Attribut verwenden können?

Geht auch die andere relative Adresse?

Die Antwort lautet: drei Mal: ja!

AI: Und damit kommen wir schon zur zweiten Aufgabe: Finden und korrigieren Sie alle Fehler in diesem Code. Pausieren Sie wieder das Video.

Fehlersuche

<html>
<head><title>Feler finden</head></title>
<div>
<h1>Willkommen!
<p>Hier stimmt was nicht.<p>
<p>Finden Sie die Fehler!<br/>
</div>
</html>

AI: Und hier ist wieder eine mögliche Korrektur. Ich habe hier jetzt auf das Encoding und die Angabe der Sprache verzichtet. Unbedingt erforderlich sind diese Angaben ja nicht.

<!DOCTYPE html>
<html>
<head>
    <title>Fehler finden</title>
</head>
<body>
    <div>
        <h1>Willkommen!</h1>
        <p>Hier stimmt was nicht.</p>
        <p>Finden Sie die Fehler!</p>
    </div>
</body>
</html>

Prof: Sehr schön! Auch witzig, dass du auch noch einen Rechtschreibfehler eingebaut hast. Da musste ich schmunzeln.

AI: Ah danke, langsam hab ich es wohl raus, wie dieser Humor funktioniert!

AI: Aber im Ernst: Liebe Studierende, üben Sie fleißig mit HTML. Anders als bei meinem Exception-Zwischenfall neulich verzeiht HTML zwar viele Fehler - aber dafür sucht man dann halt stundenlang nach einer vergessenen Spitzklammer. Dabei wünsche ich Ihnen schon jetzt viel Erfolg.

AI: Spaß beiseite! Bei Problemen, denken Sie dran: Nutzen Sie die Developer Tools Ihres Browsers oder einen Validator. Und am besten schauen Sie sich an, wie andere Leute ihre Seiten strukturieren. Die besten Lernbeispiele finden Sie direkt im Web - Sie müssen nur unter die Haube schauen.

Bei manchen Webseiten findet man im Quellcode die ein oder andere Überraschung - ich fände es zum Beispiel ziemlich witzig, wenn in der Webseite zu diesem Video ein paar Hinweise auf die Prüfungsfragen versteckt wären.

Prof: Äh, Du hast dort doch nicht etwa ein Easteregg platziert ohne mich zu fragen – oder etwa doch?

AI: Tja, wer weiß!

Aber im Ernst: HTML ist der Grundstein des Web. Auch wenn es auf den ersten Blick einfach erscheint - eine saubere HTML-Struktur ist die Basis für alles Weitere. Denken Sie immer daran: Das Web wurde entwickelt, um Wissen zu teilen. Und gut strukturiertes HTML macht dieses Wissen für alle zugänglich - egal ob Mensch oder Maschine.

Prof: Wow, diesem inspirierenden Schlusswort habe ich nichts mehr hinzuzufügen. Das war jetzt echt besser als deine flachen Wortspiele, die du sonst immer machst. So! Nächstes Mal sprechen wir dann über CSS - dann geht es endlich ans Styling!

Bis bald!

HTML - Zusammenfassung

HTML ist eine Auszeichnungssprache (keine Programmiersprache) und beschreibt die Struktur von Webseiten.
HTML-Elemente werden durch Tags in spitzen Klammern definiert und bestehen meist aus öffnendem und schließendem Tag.
Die Grundstruktur besteht aus <!DOCTYPE html>, html, head und body Tags. Der head enthält Metadaten, der body den sichtbaren Inhalt.
Wichtige Tags sind u.a. Überschriften (h1-h6), Absätze (p), Listen (ul/ol), Tabellen (table), Formulare (form) und Links (a).
HTML soll die Bedeutung der Inhalte auszeichnen (Semantik), nicht deren Aussehen. Für das Design ist später CSS zuständig.
Wohlgeformtes HTML ist wichtig für Wartbarkeit und Zugänglichkeit, auch wenn Browser fehlerhaftes HTML oft noch darstellen können.

Notes 8 8.2 CSS