Webseite Schnellstart – HTML Elemente und Attribute

Du kannst dir HTML wie ein Textprogramm (z.B. Microsoft Word) vorstellen.

Unterschied HTML und Textprogramm

Doch es gibt einen feinen Unterschied zwischen HTML und Textprogrammen.

Textprogramme (Beispiel: Microsoft Word)

Du kannst ein Word-Dokument öffnen und einen Text eingeben. Dieser Text lässt sich per Knopfdruck formatieren, z.B:

• Textformat Fett
• Schriftgröße 12
• Blaue Schrift.

HTML

In HTML hast Du keine Benutzeroberfläche. Doch wie können wir Texte einfügen und formatieren?

Ganz einfach. Dafür nutzt du in HTML sogenannte HTML-Elemente.

Mit einem HTML-Element sagst Du deinem Computer, wie er z.B. Texte, Bilder, Videos und die Struktur einer Webseite darstellen soll.

Wie benutze ich HTML-Elemente?

HTML-Elemente werden immer in <> Klammern gesetzt. Damit können wir den Anfang und das Ende eines Texts markieren. Beim Ende müssen wir noch einen Slash / hinzufügen.

Hier ein Beispiel:

<element>Textinhalt</element>

Hast du den Slash / im letzten Element gefunden?

Wenn du zum Beispiel einen Text fett markieren willst, verwendest du das <b>-Element. (b = engl. bold, übersetzt: fett)

Hier ein Beispiel für fett-formatierten Text

<b>fett formatierter Text</b>

In deinem Browser würde das so aussehen:

fett formatierter Text

Wie schon erklärt, hast Du das Anfangselement <b> und ein Endelement mit einem Slash </b>.

Es gibt für fas  jeden Zweck eigene HTML-Elemente. Wir werden diese gemeinsam Schritt-für-Schritt lernen.

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 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"

Das fertige Bild-Element sieht dann so aus:

<img src="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 😉