HTML - Das Grundgerüst
Das Grundgerüst einer Webseite ist eine im HTML-Format geschriebene Textdatei. Diese Textdatei wird üblicherweise mit der Dateiendung *.htm oder *.html (ausser es werden darin serverseitige Skriptsprachen eingesetzt, dann bestimmen diese die Dateiendung z.B. *.php, *.asp,...). Alle Bilder, Animationen und Programmierungen werden in diese Textdatei an dafür vorgesehenen Stellen und nach bestimmten Regeln eingebettet. Deshalb muss jeder Neuling, der Webseiten gestalten und programmieren will, zunächst die HTML-Grundlagen erlernen (wenn er nicht blindlings einer Komplett-Webdesigner-Software oder einem fertigen Content Management System vertauen will).
Struktur
Webseitenelemente (Text, Bilder, Videos,...) werden als HTML-Elemente semantisch strukturiert, und Metainformationen zum Dokument gespeichert (wie Sprache, Autor, Zeichensatz,...). Wichtig: Die Formatierung resp. die konkrete visuelle Darstellung der Elemente wird nicht in HTML, sondern in CSS definiert! Es geht also darum WAS es auf der Webseite gibt, aber nicht wie.
Der Inhalt von HTML-Dateien besteht also aus HTML-Elementen. HTML-Elemente werden durch so genannte Tags markiert. Fast alle HTML-Elemente werden durch ein einleitendes und ein abschliessendes Tag markiert. Der Inhalt dazwischen ist der "Gültigkeitsbereich" des entsprechenden Elements. Tags werden in spitzen Klammern notiert.
Ein HTML-Grundgerüst sieht folgendermassen aus:
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Titel</title>
</head>
<body>
</html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Titel</title>
</head>
<body>
...Webseiteninhalt...
</body></html>
Zu den Grundelementen:
<!doctype html>: Dokumenttyp-Angabe als HTML-Datei.<html lang="de">...</html>: Innerhalb dieses html-Tags befinden sich alle anderen Tags und definieren so Anfang und Ende der HTML-Datei. Und lang="de" definiert die Seite als deutschsprachig, damit der Browser diese auch in der richtigen Sprache vorlesen kann.<head>...</head>: Header. Kopfdaten, welche die HTML-Datei weiter definieren, aber nicht den Inhalt der Webseite darstellen (wie Titel, Verweise auf separate CSS- oder JavaScript-Dateien, Hinweise für Suchmaschinen,...)<meta charset="utf-8">: Definition des Zeichensatzes. UTF-8 damit auch Sonderzeichen und Umlaute korrekt dargestellt werden<meta name="viewport" content="width=device-width, initial-scale=1">: Damit wird definiert, dass keine automatische Skalierung für Mobilgeräte resp. kleine Bildschirme durchgeführt werden soll. Also die Webseite wird nicht auf die Bildschirmbreite angepasst, was sonst automatisch bei Mobilgeräten geschehen würde. Die Darstellungs-Anpassung an verschiedene Bildschirmgrössen sollte separat via CSS definiert werden.<body>...</body>: Body. Hier wird der anzuzeigende Inhalt definiert, also Text mit Überschriften, Verweisen, Grafikreferenzen usw.
Strukturierung des darzustellenden Inhalts
<body>
<header>...mit Logo, Titel und Navigationselemente...</header>
<main>...Hauptinhalt der Webseite...</main>
<footer>...Fusszeilen mit Kontakt, Impressum und Copyright...</footer>
</body>
<header>...mit Logo, Titel und Navigationselemente...</header>
<main>...Hauptinhalt der Webseite...</main>
<footer>...Fusszeilen mit Kontakt, Impressum und Copyright...</footer>
</body>
Diese Aufteilung ist aber nicht zwingend, innerhalb des "body" gibt es keine Vorschriften über die Platzierung der Elemente. Man kann also mit verschiedenen Tags Ueberschriften, Abschnitte, Tabellen,... definieren. Auf die wichtigsten Elemente gehe ich bei den Anwendungen und Beispielen ein.