HTML (Hyper Text Markup Language)

HTML ist eine Markup-Sprache, welche zur Strukturierung von Webseiten genutzt wird. Dieser Code wird von einem Browser interpretiert und gerendert. Kurzgesagt: HTML liefert den Inhalt, die Struktur und die Semantik einer Webseite.

Aufbau einer HTML-Seite


<!DOCTYPE html>
<html>
  <head>
    <title>Meine Seite</title>
  </head>
  <body>
    <h1>Willkommen auf meiner Seite</h1>
  </body>
</html>

<!DOCTYPE html>: HTML-Version. Teilt dem Browser mit, welche Version von HTML verwendet wird.
<html>: Root-Element. Das oberste Element einer Webseite.
<head>: Metadaten. Informationen über eine Webseite wie den Titel oder Metadaten.
<body>: Inhalt der Seite. Enthält alle sichtbaren Elemente auf einer Webseite.

Versionen

HTML wurde seit 1991 immer weiterentwickelt. Mittlerweile ist die neuste Version HTML 5 und wurde 2014 veröffentlicht.

Version	Jahr	Funktionen
HTML 1	1991	Grundlegende Strukturen für Webseiten
HTML 2	1995	Formulare
HTML 3	1997	Tabellen, Bilder
HTML 4	1999	Stylesheets, Frames, Forms
HTML 5	2014	Semantische Tags, Audio, Video

Elemente und Attribute

Elemente

Sie sind die Bausteine von HTML. Ein Element besteht aus einem öffnenden <> und einem schließenden </> Tag. Einige Elemente sind auch selbstschließend. Elemente können in sich selbst geschachtelt werden und sind nicht case-sensitive.


<p>Hallo, Welt!</p>
<br />
<h1>Willkommen auf <span>meiner</span> Seite</h1>

Attribute

Attribute sind Eigenschaften von HTML Elementen. Sie werden innerhalb des öffnenden Tags angegeben und liefern weitere Informationen über das Element. Mit den Attributen kann man Verlinkungen oder das Styling für dieses Element festlegen.


<a href="https://example.com">Example</a>
<p style="color: red;">Hallo, Welt!</p>

Block und Inline

Block

Block Elemente beginnen eine neue Zeile und enden automatisch mit einem Zeilenumbruch.


<div>
  <p>Hallo, Welt!</p>
</div>

Weitere Block Elemente: <h1-h6 />, <hr />, <canvas />, <form />, <footer />, <nav />, <ul />

Inline

Inline Elemente beginnen nicht eine neue Zeile und enden nicht automatisch mit einem Zeilenumbruch.


<span>Hallo, Welt!</span>
<a href="https://example.com">Example</a>

Weitere Inline Elemente: <span />, <a />, <img />, <input />, <label />, <button />

DOM (Document Object Model)

DOM ist eine Programmierschnittstelle, welche das HTML-Dokument als ein Baumdiagramm (DOM Tree) darstellt und jedes Element, Attribut und Text als Knoten repräsentiert. Dadurch wird der Code in eine strukturierte, hierarchische Struktur umgewandelt, welches von JavaScript genutzt werden kann, um die Seite dynamisch zu gestalten.

Durch dem DOM kann man die Seite dynamisch verändern und die Seite interaktiv gestalten. Es lassen sich Elemente erstellen, löschen und verändern. Mithilfe von Event-Listenern kann man auf Ereignisse reagieren und die Seite interaktiv gestalten. Durch das spezifizieren von Elementen durch IDs, Klassen oder anderen Selektoren kann man auch bestimmte Elemente suchen und finden.

DOM Tree

Jeder Knoten im DOM Tree ist ein Element und lässt sich adressieren. Mithilfe von JavaScript lassen sich Knoten erzeugen, verändern und löschen. Der oberste Knoten ist die Wurzel (root). Jeder darauffolgende Knoten hat einen Vorgänger (Parent) und kann einen oder mehrere Nachfolger (Child) haben. Geschwister (Sibling) sind Knoten mit dem selben Vorgänger.

Meistens ist die Wurzel das <html> Element. Dieses enthält das <head> und <body> Element als Kinder. Damit sind <head> und <body> Geschwisterknoten und <html> ihr Elternteil.

DOM modifizieren

Ted Nelson

Ted Nelson prägte die Begriffe Hypertext und Hypermedia im Jahr 1965 durch das Xanadu Projekt. Er war für die Entwicklung von modernen Computern, wie dem Apple I und IBM PC verantwortlich. Später kritisierte er HTML, da es dort zu viele tote Links gibt, unrückverfolgbare Links und keine Versionskontrolle.

Tabellen

Tables sind alte Methode um Daten strukturiert darzustellen. Sie sind in Zeilen und Spalten aufgebaut und können mit CSS verschönert werden.

Neuere Methoden sind Flexbox und Grid.

Aufbau

Grundstruktur Das table Element ist der Container für die Tabelle. Innerhalb des Elements werden folgende Elemente verwendet:
- <thead>: Header der Tabelle (Spaltenüberschriften)
- <tbody>: Body der Tabelle (Daten)
- <tr>: Zeile der Tabelle
- <td>: Zelle der Tabelle
- <tfoot>: Footer der Tabelle (Zusammenfassung)
Zeilen und Zellen Jede Zeile wird durch <tr> repräsentiert. Innerhalb der Zeile werden Daten durch <td> oder <th> eingefügt.

Styling Tabellen besitzen vordefinierte Attribute für Styling.

border: Gibt die Breite der Rahmen an
cellpadding: Gibt den Abstand zwischen Zellen an
cellspacing: Gibt den Abstand zwischen Tabellen an
width: Gibt die Breite der Tabelle an
height: Gibt die Höhe der Tabelle an

Mit CSS lassen sich dann weitere Attribute festlegen, wie z.B. die Farbe der Zellen.


<table cellspacing="40" cellpadding=5 border="1" width="300px">
  <thead>
    <tr>
      <th>Name</th>
      <th>Alter</th>
      <th>Ort</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Max Mustermann</td>
      <td>30</td>
      <td>Berlin</td>
    </tr>
    <tr>
      <td>Max Mustermann</td>
      <td>30</td>
      <td>Berlin</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Zusammenfassung</td>
    </tr>
  </tfoot>
</table>

Table Example

Formulare

Formulare sind interaktive Elemente auf Webseiten, die Benutzereingaben ermöglichen. Sie bestehen aus verschiedenen Elementen, die Daten sammeln und verarbeiten.

Aufbau

Form-Tag Der form Tag ist der Container für das Formular. Es kann Attribute wie action (URL der Datenübertragung) und method (Übertragunsmethode) enthalten.
Strukturierung Innerhalb eines Formulares wedrden Eingabeelemente, Beschriftungen (<label>) und Eingabeelemente (<button> oder <input>) verwendet.

Methoden

Für die Übertragung von Daten werden zwei Methoden genutzt:

GET

Die Daten werden an die URL als Key/Value Paare angehängt.
Dadurch entsteht aber eine limitierung, da URLs nur 3000 Zeichen enthalten können.
Daten die über GET versendet werden, sind durch die URL einsehbar und sollten daher nicht sensible sein.

POST

Daten werden im Body des HTTP-Requests gesendet.
Dadurch gibt es keine Einschränkung der Länge des Forms.
Außerdem sind diese Daten nicht offensichtlich einsehbar.

Input Elemente

Input Elemente sind die grundlegenden Eingabeelemente in HTML. Sie ermöglichen es, Texte, Zahlen, Daten und andere Informationen einzugeben.

Je nach Typ des Input Elements, kann man verschiedene Eigenschaften festlegen.

Text
- <input type="text" /> - Einzeilige Text Eingabe
- <textarea> - Mehrzeilige Text Eingabe
Passwort
- <input type="password" /> - Passwort Eingabe (Maskiert)
Auswahl
- <input type="checkbox" /> - Mehrfachauswahl
- <input type="radio" /> - Einzelauswahl
- <select> - Auswahl aus einer Liste von <option> Elementen
Date
- <input type="date" /> - Datumsauswahl
- <input type="time" /> - Uhrzeitauswahl
Schaltfläche
- <button> - Button
- <input type="submit" /> - Senden Button
- <input type="reset" /> - Zurücksetzen Button


<form action="/submit" method="POST">
  <label for="name">Name</label>
  <input type="text" name="name" />
 
  <label for="password">Passwort</label>
  <input type="password" name="password" />
  
  <input type="submit" value="Senden" />
</form>