HTML für Anfänger: Webseiten lesen und selbst ändern
HTML steht für HyperText Markup Language. Mit dieser Auszeichnungssprache legst du fest, was ein Stück Text ist: Überschrift, Absatz, Bild oder Link. Der Browser baut daraus die sichtbare Seite. Diese Einführung in HTML für Anfänger arbeitet mit dem Quelltext deiner eigenen Galerie. Öffne eine Kategorie, klicke mit der rechten Maustaste auf eine freie Stelle und wähle „Seitenquelltext anzeigen“. Alle Beispiele stammen aus einer Kategorie „Herbst“ mit vier Fotos.
Tag, Element, Attribut: drei Begriffe für jeden Quelltext
Über den Vorschaubildern nennt die Galerie, wie viele Fotos in der Kategorie liegen. Im Quelltext steht dort: <p class="anz_kategorie_text">Es sind 4 Bilder in der Kategorie „Herbst“.</p>. Mit drei Begriffen lässt sich diese Zeile zerlegen.
Tag: alles zwischen < und >. Das öffnende <p> beginnt einen Absatz, das schließende </p> mit Schrägstrich beendet ihn.
Attribut: eine Zusatzangabe im öffnenden Tag, immer als Name und Wert. Hier heißt der Name class, der Wert anz_kategorie_text. Darüber findet das Stylesheet den Absatz und gibt ihm Schrift und Farbe.
Element: öffnendes Tag, Inhalt und schließendes Tag zusammen, also der ganze Baustein.
Im Browser verschwinden Tags und Attribute, der Besucher liest nur den Satz. Ein Vorschaubild hat dagegen gar keinen Inhalt und deshalb auch kein schließendes Tag: <img src="…/tn3_kuerbisse.jpg" alt="Kürbisse" class="vorschau_bild" width="200" height="150" />. Hier steckt alles in den Attributen.
src nennt die Bilddatei, alt den Ersatztext für Vorleseprogramme und fehlende Bilder. class holt Rahmen und runde Ecken aus layout.css. width und height reservieren den Platz, bevor das Bild geladen ist. Das Diagramm markiert oben die drei Begriffe und baut unten nacheinander je einen Fehler in das Vorschaubild ein:
Tags und Attribute sieht der Besucher nie, ihre Wirkung schon: Jedes fehlende oder falsche Attribut am Vorschaubild hat eine eigene, sichtbare Folge.
Das Grundgerüst: head und body
Jede HTML-Seite steckt im selben Rahmen. Deiner Galerie liegt dafür ein kurzes Beispiel bei: die Vorlage tpl/bildergalerie.html mit 19 Zeilen. Ganz oben steht <!DOCTYPE html>, darunter umschließt <html lang="de"> zwei Teile: den Kopf (head) und den Körper (body).
Die Faustregel lautet: Was der Besucher sehen soll, gehört in den body. Was nur der Browser braucht, gehört in den head.
In der Vorlage
Bereich
Wozu
drei meta-Zeilen
head
Zeichensatz für Umlaute, Anpassung an Handys, Feld für deinen Namen
title
head
Text im Browser-Tab
zwei link-, drei script-Zeilen
head
laden die Gestaltung (layout.css) und die große Bildansicht
zwei div-Bereiche
body
der weiße Rahmen und darin der Platzhalter {AUSGABE_BILDERGALERIE}
Direkt lesen kannst du vom head nur den Titel im Tab, bei geöffneter Kategorie „Bildergalerie – Herbst“. Seine übrigen Zeilen wirken trotzdem: Ohne die erste link-Zeile fehlte der weiße Rahmen mit den runden Ecken.
Den Platzhalter im body füllt das Script bei jedem Aufruf, in einer Kategorie mit Überschrift, Pfad, Zähler und Vorschaubildern. Die Zeile „Copyright by Bildergalerie-Script.de“ steht nicht in der Vorlage. Das Script setzt sie selbst vor das schließende </body>, also unter den Rahmen. Das zweite Diagramm zeigt, welcher Teil der Vorlage wo im Browserfenster landet:
Der head liefert den Tab-Titel und lädt die Gestaltung. Im body tauscht das Script den Platzhalter gegen den Inhalt der Kategorie und hängt die Copyright-Zeile an.
Elemente stecken ineinander: die Kategorieseite
In die Lücke der Vorlage schreibt das Script bei einer Kategorie zuerst eine h1 mit ihrem Namen, danach den Pfad „Sie befinden sich“ und den Bilderzähler. Es folgt eine Tabelle mit den Vorschaubildern.
An dieser Tabelle siehst du die wichtigste Grundregel von HTML: Elemente stecken ineinander wie Schachteln. Die Tabelle enthält Reihen (tr), jede Reihe Zellen (td), jede Zelle einen Link (a) und jeder Link ein Bild (img). Bei vier Fotos und der Grundeinstellung von zwei Vorschaubildern pro Zeile sind das zwei Reihen mit je zwei Zellen. Für eigene Seiten ist diese ältere Bauweise kein Vorbild mehr: Tabellen sind für Daten gedacht, ein Bildraster baut man heute mit CSS.
Für Entwickler: der Quelltext einer Kategorie mit Vorschaubildern
Die Ausgabe bei vier Fotos, gekürzt auf den Anfang. rel="lightbox[example]" öffnet per lightbox.js die große Ansicht.
Selbst ausprobieren: eine Testseite nach dem Muster der Vorlage
Quelltext liest du am schnellsten, wenn du einmal selbst welchen geschrieben hast. Dafür reicht ein reiner Texteditor, Word taugt nicht. Lege in einem leeren Ordner die Datei test.html an. Sie hat dasselbe Gerüst wie die Galerie-Vorlage, nur steht statt des Platzhalters fester Inhalt im Rahmen:
<!DOCTYPE html>
<html lang="de">
<head> <meta charset="utf-8"> <title>Unsere Fotos</title>
</head>
<body> <div class="div_center"> <h1>Herbst</h1> <!-- Kommentar: der Browser zeigt ihn nicht --> <p>Bilder vom Herbstmarkt.</p> <img src="kuerbisse.jpg" alt="Kürbisse" width="200" height="150"> </div>
</body>
</html>
Ziehe die Datei in ein Browserfenster, ändere ein Wort, speichere und lade neu. Liegt keine kuerbisse.jpg im Ordner, erscheint der Ersatztext „Kürbisse“, genau wie im ersten Diagramm. Einen weißen Rahmen siehst du dagegen nicht: Die Klasse div_center wirkt erst, wenn ein Stylesheet wie layout.css sie gestaltet.
Ein Zeilenumbruch im Editor ändert nichts, der Browser fasst Umbrüche und Leerzeichen zu einem Leerzeichen zusammen. Einen neuen Absatz gibt es nur mit einem neuen p. Speichere die Datei als UTF-8, passend zur meta-Zeile. Sonst steht in „Kürbisse“ statt des ü eine Raute mit Fragezeichen.
Eigene Änderungen sicher in die Vorlage einbauen
Nicht jeder Wunsch ist ein Fall für HTML. Farben regelt CSS. Drei statt zwei Bilder pro Zeile stellst du unter „Einstellungen“ im Feld „Vorschaubilder pro Zeile“ ein (1 bis 20). In die Vorlage gehören dein Text, dein Menü und deine Fußzeile. Drei Gewohnheiten verhindern dabei die meisten Fehler:
Einfügungen markieren: Rahme jede Ergänzung mit Kommentaren wie <!-- Anfang eigenes Menü --> ein, dann findest du sie nach einem Update sofort wieder. Schreibe aber nie </body> oder {AUSGABE_BILDERGALERIE} in einen Kommentar. Das Script ersetzt beide auch dort, und Copyright-Zeile oder Galerie stehen doppelt im Quelltext.
Jedes Element schließen: Fehlt in <p><strong>Neu: Herbstfotos</p> das </strong>, öffnet der Browser die Fettschrift in jedem folgenden Absatz neu, und alle Absätze darunter erscheinen fett. Löschst du beim Einfügen versehentlich ein </div> der Vorlage, rutscht deine Fußzeile in den weißen Rahmen.
Werte in Anführungszeichen: Ohne Anführungszeichen endet ein Attributwert am ersten Leerzeichen. Aus alt=Kürbisse am Stand wird der Ersatztext „Kürbisse“.
Praxisfall: das eigene Menü über die Galerie setzen
Kopfbereich und Menü deiner Website kommen direkt hinter <body>, also vor den Rahmen div_center. Dafür gibt es die Elemente header und nav. Sie sehen aus wie ein div, sagen aber, welche Aufgabe der Bereich hat, und Vorleseprogramme springen damit direkt zum Menü. Die Fußzeile setzt du als footer vor </body>.
Da die Galerie den Kategorienamen als h1 ausgibt, schreibst du den Namen deiner Website im Kopf als p. Eigene Zwischenüberschriften beginnen bei h2. Dein Stylesheet kommt im head unter die beiden vorhandenen link-Zeilen.
Fehlt danach deine Gestaltung, stimmt fast immer ein Pfad nicht. Die Vorlage lädt ./css/layout.css, der Punkt bedeutet: im Ordner der aufgerufenen Seite. Liegt die Galerie im Unterordner galerie/, sucht der Browser ein ./css/meine-website.css deshalb in galerie/css/. Liegt deine Datei im Ordner css/ der Hauptseite, schreibe /css/meine-website.css. Der Schrägstrich am Anfang lässt den Pfad im Hauptverzeichnis der Domain beginnen.
Ein Update überschreibt tpl/bildergalerie.html. Sichere deine Fassung vorher und spiele sie danach zurück. Zum Üben kannst du das Bildergalerie-Script kostenlos herunterladen und die Vorlage schon vor der Installation im Editor öffnen.
Kontrolle mit Validator und Entwicklerwerkzeugen
Prüfe die fertige Seite, nicht die Vorlage, denn erst beim Aufruf füllt das Script die Platzhalter. Der kostenlose Prüfdienst des W3C unter validator.w3.org nimmt die Adresse einer Kategorieseite entgegen und listet jede Beanstandung mit Zeilennummer. Beim vergessenen </strong> von oben meldet er „Unclosed element“, bei einem schließenden Tag ohne öffnendes „Stray end tag“.
Mit der Taste F12 öffnest du die Entwicklerwerkzeuge des Browsers. Der Reiter „Elemente“ zeigt nicht deine Datei, sondern das, was der Browser daraus gebaut hat. Beim vergessenen </strong> siehst du dort in jedem folgenden p ein neues strong, das in deiner Datei gar nicht steht. Fährst du mit der Maus über ein Element, hebt der Browser es auf der Seite farbig hervor. So erkennst du, ob deine Fußzeile innerhalb oder unterhalb des weißen Rahmens gelandet ist.
Häufige Fragen zu HTML für Anfänger
Ist HTML schwer zu lernen?
Das Lesen nicht. Mit Tag, Element, Attribut, dem Gerüst aus head und body und der Schachtelregel verstehst du den Quelltext deiner Galerie. Für ihren Betrieb brauchst du gar kein HTML, denn Fotos, Kategorien und Einstellungen pflegst du in der Verwaltung.
Was ist der Unterschied zwischen HTML und CSS?
HTML legt fest, was etwas ist: Überschrift, Absatz, Bild, Menü. CSS legt fest, wie es aussieht: Farbe, Schrift, Abstände, Anordnung. Der Rahmen um die Vorschaubilder steht deshalb in layout.css, das HTML verweist nur per class="vorschau_bild" darauf.
Woher kommt der alt-Text der Vorschaubilder?
Aus der Beschreibung, die du unter „Bilder verwalten“ zum Bild einträgst und mit „Beschreibungen speichern“ sicherst. Die Galerie schreibt sie in das alt-Attribut des Vorschaubilds und in das title-Attribut des Links darum. Ein Bild ohne Beschreibung bekommt ein leeres alt="".
Wie lerne ich nach den Grundlagen weiter?
Am besten an der Testseite von oben. Als Nächstes lohnen Listen (ul, li) und Formulare (form, input, label), etwa für ein Kontaktformular, danach CSS. Zum Nachschlagen eignen sich die deutschsprachigen Seiten von SELFHTML und die MDN Web Docs.
Verwandte Themen
Nach HTML folgen CSS, JavaScript und ein guter Editor:
