HTML in 2 Minuten
HTML ist keine Programmiersprache, sondern eine Seitenbeschreibungssprache. HTML bestimmt die Struktur von Inhalten, die ein Browser anzeigt. Ein Browser (z. B. Firefox, Chromium, Opera, Safari, Edge, Internet Explorer) kann HTML-Seiten darstellen und JavaScript-Programme ausführen.
HTML-Seiten können als Dateien auf dem lokalen Computer mit der Dateiendung .html oder .htm existieren. Die HTML-Datei liegt in diesem Fall in einem Verzeichnis, dem Speicherort. Ein Klick oder Doppelklick – je nach Einstellung des Betriebsystems – auf die HTML-Datei zeigt die sie als HTML-Seite in dem Browser an. In der Adresszeile des Browser ist der Speicherort als Dateipfad zu sehen. Ebenso kannst du den Dateipfad direkt in die Adresszeile eingeben.
Ist die HTML-Datei im Netz gespeichert, ist die Eingabe der Adresse (dem Speicherort) der übliche Weg, die HTML-Datei anzuzeigen. Ein Link zu der Adresse ist ein anderer üblicher Weg.
Häufig existieren die für den Leser erscheinenden HTML-Seiten nicht als fertige Datei, sondern als eine Zusammenstellung von Verweisen auf die Quellen. Damit sind wieder Speicherorte gemeint.
Der Seitenaufruf bringt alle für diese Seite bestimmtem Inhalte wie Texte, Bilder in eine HTML-taugliche Struktur. Die Datenquelle kann eine Datenbank (Speicherort für viele Daten mit einer festen Struktur) oder eine Textdatei (auch mehrere) sein. Anders formuliert: der Seitenaufruf wertet textbasierte Informationen aus und erstellt eine HTML-Seite. Der Text kann die Information selbst sein, ein Verweis auf eine andere HTML-Seite, ein Bild etc.
Zur Strukturierung dienen Tags genannte Auszeichnungen in spitzen Klammern. Eine leere HTML-Seite ohne Seitentitel hat die Struktur:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
</head>
<body>
</body>
</html>
Die Bedeutung der Tags:
<!DOCTYPE html>: Angabe des Dokumententyps, hier HTML<html lang="de">: Beginn des HTML-Dokuments mit der verwendeten Sprache, hier Deutsch<head>: Beginn des Kopfbereichs<meta charset="utf-8">: der verwendete Zeichensatz<meta name="viewport" content="width=device-width, initial-scale=1.0" />: Skalierung für Mobilgeräte<title></title>: der Seitentitel</head>: Ende des Kopfbereichs<body>: Beginn des Körperbereichs</body>: Ende des Körperbereichs</html>: Ende des Dokuments
Wenn du noch nie einen HTML-Quelltext gesehen hat, wunderst du dich vielleicht über die Form. Wäre ein Mensch (ich) nach diesem Schema beschrieben, könnte der Quelltext wie folgt aussehen:
<!Typ Mann>
<Mann Sprache="deutsch">
<Kopf>
<meta Dialekt="hochdeutsch">
<meta Format="anpassungsfähig">
<title>Wolfgang</title>
</Kopf>
<Körper>
Lausiger Gitarrist, Jogger, Fachbuchautor, Publizist, Programmierer, Tüftler.
</Körper>
</Mann>
Tags treten einzeln oder als ein Paar mit einem Anfang und einem Ende (an dem / im Tag zu erkennen) auf. <!DOCTYPE html> steht alleine, ebenso wie <meta charset="utf-8">. Der (hier nicht vorhandene) Seitentitel steht zwischen dem Paar <title></title>, obwohl er nur eine Information darstellt.
Meistens stehen zwischen dem Tag-Paar mehrere Informationen, wegen der Übersichtlichkeit zeilenweise. Das sind Tags mit einem Bereich.
Die gesamte Seite ist zwischen den Tags <html lang="de"> und </html> notiert. Dieser Bereich ist mehrzeilig. Mit den entsprechenden Einrückungen ist der Code leichter lesbar. <head></head> ist der mehrzeilige Kopfbereich der Seite, kurz <head>-Bereich oder einfach nur head. Im <head>-Bereich sind mindestens der Seitentitel und Meta-Angaben (Informationen zum Dokument wie der verwendete Zeichensatz) enthalten.
Ein Zeichensatz garantiert die korrekte Darstellung der Zeichen, die in dem Zeichensatz definiert sind. Ein Beipiel: die deutschen Umlaute ü,ö und ä erscheinen auch in Sprachen, die diese Zeichen nicht verwenden.
<body></body> ist der Körperbereich der Seite, kurz <body>-Bereich oder body. Im <body>-Bereich stehen die für den Leser bestimmten Inhalte. Sofern die Seite (wie hier) nicht leer ist, ist dieser Bereich (meistens) mehrzeilig.
Tags gibt es in HTML in großer Anzahl. Hier sind nur einige wenige dargestellt, die für die verwendeten Beispiele von Interesse sind.
JavaScript-Programme sind durch die Tags <script></script> gekennzeichnet, sie können sowohl im <head> wie <body> stehen, auch an mehreren Stellen.