HTML

Eine Auszeichnungssprache (Markup Language, ML) dient zur Beschreibung von Informationen oder Verfahren, die zur Darstellung eines Dokuments benötigt werden.

1. HTML legt fest, was auf der Seite stehen soll (inhaltlicher, struktureller und semantischer Aufbau)
2. CSS legt fest, wie es dargestellt werden soll (Formatierung und Gestaltung)
3. JS legt fest, was passieren soll (Verhalten interaktiver Elemente)

Dieses Grundgerüst besteht aus 3 Bereichen: DOCTYPE (Dokumententyp (HTML5)) HEAD (beinhaltet Metadaten) BODY (eigentlicher Inhalt)

<titel> <base> <link> <style> <script> <meta>

Das <a>-Element wird mit dem href-Attribut benutzt, um einen Hyperlink (auch als Link oder Anker bezeichnet) zu erzeugen. Es erzeugt ein Inline-Element, d.h., es führt nicht zu einem Zeilenvorschub. Ein Link kann sowohl auf eine andere Seite in derselben Domain oder zu einer externen URL führen.

href Hypertext Referenz (relative/absolute Pfadangaben oder URL) target „_blank“ Öffnet die Seite in einem neuen Fenster oder Tab „_self“ Öffnet die Seite im selben Fenster oder Tab (Voreinstellung)

<table>
 <tr>
 <th>Dies ist Tabellenheader 1</th>
 <th>Und dies der 2.</th>
 </tr>
 <tr>
 <td>Zeile 1, Spalte 1</td>
 <td>Zeile 1, Spalte 2</td>
 </tr>
 </table>

rowspan und colspan

 <table>
 <tr>
 <th>Montag</th><th>Dienstag</th><th>Mittwoch</th><th>Donnerstag</th><th>Freitag</th>
 </tr>
 <tr>
 <td rowspan="2">Physik</td>              <!-- 2 untereinander liegende Zellen -->
 <td colspan="3">Freistunden</td>         <!-- 3 nebeneinander liegende Zellen -->
 <td rowspan="2">Sport</td>               <!-- 2 untereinander liegende Zellen -->
 </tr>
</table>

Der Begriff „tableless web layout“ beschreibt die Verwendung von CSS anstelle von HTMLTabellen zum Positionieren von HTML-Elementen auf der Webseite. Ziel ist es, die Trennung zwischen Design und Inhalt zu verbessern und zu einer strikten semantischen Strukturierung von Inhalten im Web zurückzukehren.

Wichtig: HTML-Tabellen haben immer noch ihren legitimen Platz bei der Darstellung von Tabelleninformationen auf Webseiten.

Das <form>-Element in HTML wird verwendet, um Benutzereingaben zu erfassen und an einen Server zu senden. Es bildet das Herzstück eines HTML-Formulars und umschließt Eingabefelder, Buttons, Auswahlfelder usw.

POST und GET

Die GET-Methode ist der voreingestellte Wert (default), der automatisch gilt, wenn kein method-Attribut gesetzt wurde. Bei der GET-Methode werden die zu übermittelnden Daten als Query-Strings (Name/Wert-Paare) in der URL des GET-Requests gesendet.

POST-Anfragen übertragen die Query-Strings (Name/Wert-Paare) im HTTP-Nachrichtentext des POSTRequests. POST-Anfragen haben keine Einschränkungen bei der Datenlänge, werden nicht gecached und bleiben nicht im Browser-Verlauf.

Ist es der vorrangige Sinn des Formulars, Daten vom Server abzurufen (z. B. eine Suchanfrage), so verwendet man GET; ist der Hauptzweck eher das Übermitteln von Daten zum Server (z.B. das Abschicken einer Bestellung an einen Online-Shop), so verwendet man POST.

Möglichkeit 1: <input type="submit" value="Absenden"> (veraltet)
Möglichkeit 2: <button>Absenden</button>

Bessere Struktur und Lesbarkeit Suchmaschinenoptimierung (SEO) Verbesserte Barrierefreiheit (Screenreader) Erleichtert Wartung & Zusammenarbeit

Faustregel: Semantisches HTML macht den Code verständlicher für Entwickler und Maschinen (z. B. Suchmaschinen).