Ratgeber: HTML-Programmierung lernen

Es ist sicher nützlich, einige HTML-Kenntnisse zu besitzen, z. B., wenn Sie eine eigene Homepage erstellen. Wer sich im Internet bewegt oder einer bestimmten Personengruppe Texte und Informationen übermitteln will, ohne sich auf fertige Lösungen zu verlassen, der kann diese Hypertext-Markup-Language mit einem einfachen Editor zusammen einsetzen, um eigene Websites oder Informationsseiten im Internet zu publizieren. Um zu verstehen, wie HTML funktioniert werden hier ein paar Prinzipien kurz erklärt.

Schritt 1: Containerlogik verstehen

Bevor Sie loslegen, sollten Sie das Prinzip verstehen, nach dem HTML funktioniert und aufgebaut wird. Eine Definition von HTML und eine Erklärung verschiedener Funktionen wie Links, Grafiken sowie Tabellen finden Sie auf dieser Webseite der Uni Köln. HTML folgt der Containerlogik der Tags. Das heißt, dass Tags in Blöcken, den sogenannten Containern, aufgebaut sind.

Ein Container kann also folgendermaßen aufgebaut sein:

<html>
<head>
<title>Meine erste Website</title>

</head>
<body>
<p>Hallo Welt!</p>

</body>
</html>

Wird dieser HTML-Code in einen Texteditor oder HTML-Editor kopiert und unter name.html gespeichert und das Dateisymbol mit einem Doppelklick geöffnet, erscheint im Explorer oder einem anderen Browser ein Text: Hallo Welt. Der Titel erscheint oben über der Befehlsleiste. Diese HTML-Seite besteht aus einem äußeren Container (html) einem Container für sogenannte Metatags (title) und einem Body-Tag, in dem die Inhalte (Text und Bild) untergebracht werden. Der äußere Container umschließt die beiden inneren Container, die wiederum bestimmte Inhalte umfassen.

Schritt 2: Tags und Attribute

Um diese Inhalte auszugeben, sind eine ganze Reihe Tags vorhanden:

h1 – h5 für Headlines, also Überschriften. p wie Paragraph für Textblöcke
img wie Image für Bilder div wie Division für die Unterteilung in Abschnitte und Spalten

Die Schreibweise folgt dabei immer dem gleichen Muster:

<tag>Inhalt</tag>

Zwei eckige Klammern öffnen den Tag, eine eckige Klammer mit Querstrich und eine weitere eckige Klammer schließen den Tag. Tag heißt einfach nur Marke oder Auszeichner. Wichtig zum Verständnis des Prinzips sind die Schreibkonvention und die Bedeutung des Symbols.
Für die Darstellung der Inhalte wie zum Beispiel der Schrifthöhen gibt zu jedem Tag eine Reihe von Eigenschaften oder Attributen. Folgendes Beispiel soll veranschaulichen, was damit gemeint ist:

<h1 align=“center“>Hallo!</h1>

Align bedeutet soviel wie Ausrichtung. Dahinter kommt ein Gleicheitszeichen und dann die Eigenschaft center. Dieses Attribut im h1-Tag bedeutet, dass der Inhalt „Hallo“ mittig ausgegeben wird. Es ist möglich, diese Überschrift auch links- oder rechtsbündig auszugeben. Container, Tags und Attribute werden unter der Dateiendung name.html vom Browser entsprechend interpretiert. Wer diese drei Begriffe richtig verstanden hat, kann nun mithilfe einer HTML-Referenz anfangen, die ersten einfachen Seiten zu erstellen und seinen persönlichen Erfordernissen anzupassen. Die HTML-Befehle sind auch recht praktisch, wenn Sie mit WordPress arbeiten und sich da den Code direkt anschauen können.

Bild: Screenshot