Einstellungen an Elementen: Attribute

Ok, genug von den Planetenentdeckern.

Du hast nun verstanden worum es bei Überschriften und deren Ebenen geht.

Wie sieht es aber beim Text aus? Wie kann man zum Beispiel die Farbe eines Textes beeinflussen?

Dafür gibt es Attribute für HTML-Elemente.

Was ist ein Attribut?

Du kannst dir Attribute, wie eine Eigenschaft oder eine Einstellung an einem Element vorstellen.

Wechseln wir zu unserem bewährten Haus-Beispiel:

Stell dir vor, du hast eine Tür in deinem Rohbau. Es ist ja nicht irgendeine Tür. Diese Tür hat eine Breite, eine Höhe und eine Tiefe. Dazu hat sie ein bestimmtes Design und weitere Eigenschaften (wenn man den Türfachmann seines Vertrauens fragt).

Und so haben HTML-Elemente Eigenschaften, die bereits vom HTML-Standard festgelegt wurden.

Das Schöne: Wir können diese Eigenschaften auf den Elementen verändern. Dafür nutzen wir die Attribute.

Hier ein Code-Beispiel:

<element eigenschaft="wert">Ich bin ein Text.</element>

Mit eigenschaft="wert" können wir Einstellungen am HTML-Element vornehmen. Wir müssen jetzt nur noch wissen, welche Attribute und Werte es für jedes Element gibt.

Es gibt für alle Elemente unterschiedliche Attribute. Aber keine Angst, du musst nicht alle auswendig lernen. Meistens schlägst Du die Attribute einfach mit einer Google-Suche nach, wenn sie von dir benötigt werden.

Wichtig ist nur, dass du weißt, wie man Attribute anwendet. Deshalb üben wir das jetzt.

Lass uns dafür ein Bild auf der Seite einfügen. Ein Bild wird mit dem Element <img> eingefügt.

Doch zum Einfügen des Bildes, müssen wir dem Browser noch einen Link mitteilen. Das machen wir mit dem src="" Attribut, was wie folgt aussieht: src="bild.jpg"

Fertiger Code, zur Darstellung eines Bildes:

<img src="bild.jpg">

Der Code zeigt dann z.B. dieses Bild mit dem Namen bild.jpg:

TIPP: Falls du dich wunderst, wo das Endelement bleibt, möchte ich die Verwirrung aufheben. Das img-Element ist ein Element, welches kein Endelement benötigt, später mehr dazu 😉