Zum Hauptinhalt springen

Einstieg

Um eine Webseite zu erstellen, müssen wir dem Browser sagen, welche Inhalte wir auf unserer Seite anzeigen wollen. Hierfür verwenden wir die Sprache HTML.

Grundlagen von HTML​

HTML bietet uns eine Reihe von sogenannten "Tags", die wir verwenden können, um verschiedene Elemente auf unserer Webseite zu definieren. Diese Tags können Texte, Bilder, Links und vieles mehr darstellen. Hier sind einige grundlegende HTML-Tags, die wir verwenden werden.

Wenn wir einen Text auf unserer Webseite anzeigen wollen, verwenden wir das <p>-Tag. Das "P" kommt aus dem Englischen "Paragraph" (Absatz).

<p>Das ist ein Absatz auf meiner Webseite.</p>

Wie man sehen kann, wird das "P" mit spitzen Klammern < > umschlossen. Alles, was in spitzen Klammern steht, wird als Tag erkannt. Jedes Tag hat ein öffnendes und ein schliessendes Tag.

Gruppieren von Inhalten​

Tags können auch weitere Tags enthalten. So können wir mehrere Absätze gruppieren.

<div>
  <p>Das ist der erste Absatz in einer Gruppe.</p>
  <img src="bild.jpg">
</div>

In diesem Beispiel haben wir einen Textabsatz und ein Bild in einem div-Tag gruppiert. Das div-Tag dient also zur Gruppierung von Inhalten.

Attribute​

Wie du vielleicht im vorherigen Beispiel gesehen hast, können Tags auch Attribute haben, wie zum Beispiel src. Beim img-Tag (Bild) haben wir mit Hilfe des Attributs eine Bildquelle definiert. Viele HTML-Tags können Attribute haben, die zusätzliche Informationen über das Element bereitstellen.

Klassen und IDs​

Um unsere HTML-Elemente voneinander zu unterscheiden, können wir ihnen Klassen und IDs zuweisen. Diese helfen uns später, die Elemente mit CSS zu stylen oder mit JavaScript zu manipulieren.

<p class="meine-klasse">Dieser Absatz hat eine Klasse.</p>
<div id="meine-ID">Dieses div hat eine ID.</div>

Klassen und IDs werden ebenfalls als Attribute in den Tags definiert. Eine Klasse kann mehreren Elementen zugewiesen werden, während eine ID einzigartig für ein einzelnes Element sein sollte.