Grundlagen
Last updated
Was this helpful?
Last updated
Was this helpful?
HTML ist keine Programmiersprache, sondern eine Auszeichnungssprache; sie ist dazu gedacht, einer Website Struktur zu verleihen.
Die Sprache besteht aus einer Reihe von Elementen, Tags genannt, welche um verschiedene Teile des Inhalts herum platzieren werden können, um diesem eine spezielle Aufgabe zuzuweisen. Zum Beispiel kann damit einen Text oder ein Bild in einen Link verwandelt werden.
Um die Auszeichnungssprache kennenzulernen, nehmen wir folgenden Inhalt:
Wenn wir möchten, dass der Satz in einem eigenen Absatz steht, können wir mit <p> spezifizieren, das es sich um einen Absatz handelt:
Das oben beschriebene Beispiel zeigt, wie ein HTML-Element aufgebaut ist:
Das öffnende Tag: Diese besteht aus dem Namen des Elements (in diesem Fall ein p für paragraph (engl.: Absatz)), welcher zwischen zwei spitzen Klammern eingesetzt ist. Dies zeigt an, wo das Element beginnt — in diesem Fall am Anfang unseres Absatzes.
Der Inhalt: Dies ist der Inhalt des Elements, in diesem Fall einfach nur Text.
Das schliessende Tag: Dieses sieht genauso aus wie das öffnende Tag, bis auf den zusätzlichen Schrägstrich (Slash) vor dem Namen des Elements. Dieser Tag kommt an das Ende des Elementes — in diesem Fall am Ende des Absatzes.
Das Element: Das öffnende Tag, der Inhalt und das schliessende Tag gemeinsam ergeben zusammen das Element.
Elemente können auch Attribute enthalten. Das sieht dann so aus:
Attribute enthalten Zusatzinformationen über das Element, welche nicht als eigentlicher Inhalt anzeigt werden. In diesem Fall erlaubt das Attribut, dem Element einen Identifizierungsnamen zu geben. Diesen kann manh später dazu verwenden, das Element mit Informationen wie zum Beispiel Schriftart und -farbe zu versehen.
In unserem Beispiel ist der Name des Attributes class und kommentar ist der diesem Attribut zugeordnete Wert.
Ein Attribut sollte immer haben:
Einen Abstand zwischen ihm und dem Elementnamen (oder dem vorherigen Attribut, wenn es mehrere sind).
Den Attributnamen, gefolgt von Gleichheitszeichen
Anführungs- und Schlusszeichen um den Wert (beispielsweise: "kommentar").
Mehrere Elemente können ineinander verschachtelt werden. Wenn wir also besonders betonen wollen, dass unsere Katze zwei Beine hat, können wir dieses einzelne Wort in einem <strong> Element verpacken.
Folgendes Beispiel ist nicht richtig, da die Elemente nicht ineinander verschachtelt sind, sondern überlappen. Das Element, das zuerst geöffnet wird, muss als letztes geschlossen werden.
Gewisse Elemente haben keinen Inhalt, diese werden leere Elemente genannt. Beispielsweise das <img> Element:
Das <img>-Tag beinhaltet zwei Attribute, aber es gibt kein schliessendes </img>-Tag und keinen Inhalt in dem Element. Das <img>-Tag braucht keinen Inhalt um einen Effekt zu haben. Es bindet ein Bild an der entsprechenden Stelle in der HTML-Seite ein.
Unter folgendem Link befindet sich eine Liste der HTML-Tags mit Beschreibung und Beispielen:
ACHTUNG: Elemente mit dem Vermerk Not supported in HTML5. sollten nicht mehr verwendet werden.
Gehe auf Codepen.io und probiere folgende Tags aus:
