Tags und Attribute sind der essenzielle Bestandteil von HTML. Wenn du diese verstanden und gut anwenden kannst, ist es nicht mehr weit, dass du deine eigenen sinnvolleren statischen Webseiten erstellen kannst. Ich werde dir in diesem Kapitel also die Grundlagen von HTML beibringen. Solltest du dies beim ersten Lesen nicht verstehen, ist dies nicht allzu tragisch. Versuche diese selber anzuwenden und probiere ein wenig herum. So lernst du bekanntlich am meisten!
Stelle dir ein leeres Word Dokument vor. Schreibst du nun einen Text in diese Datei hinein, ist dieser in der Standardgröße, nicht dick, nicht kursiv und auch nicht unterstrichen. Möchtest du eine Textpassage jetzt jedoch dick erscheinen lassen, markierst du diesen Text und drückst auf den dafür vorgesehenen Button. Dies funktioniert natürlich nicht in HTML. Hier nutzen wir Tags, die diese Passagen markieren, indem am Anfang der gewollten Passage ein öffnendes Tag und am Ende ein schließendes Tag platziert wird. Dies sieht beispielsweise folgendermaßen aus, wenn wir das Wort "Webseite" dick schreiben möchten:
Hallo Welt! Dies ist meine erste <b>Webseite</b>!Möchten wir nun das Wort "meine" kursiv gestalten, sieht unser Code folgenermaßen aus:
Hallo Welt! Dies ist <i>meine</i> erste <b>Webseite</b>!Spätestens beim zweiten Beispiel sollte dir ein Muster aufgefallen sein. Ein öffnendes Tag wird allgemein so geschrieben:
<VORDEFINIERTER-NAME>Ein schließendes, wie hier:
</VORDEFINIERTER-NAME>Innerhalb des öffnenen und schließenen Tags wird der Inhalt verfasst. Hier könnten im späteren Verlauf auch weitere Tags platziert werden.
Es gibt jedoch Ausnahmen! Um beispielsweise Bilder einzufügen, gibt es nur ein öffnenes Tag:
<img src="./bilder/madu.png">Dies ist immer der Fall, wenn es innerhalb eines Elements keinen Inhalt geben kann. Beispiele hierfür sind Bilder und Videos. Dies sind in sich geschlossene Elemente, die keinen Inhalt selber besitzen können, weshalb sie auch kein schließendes Tag brauchen, um Inhalt einfügen zu können.
Attribute sind Eigenschaften von HTML Elementen. Diese werden immer im öffnenden Tag, nach dem Namen, eingefügt. Meistens haben diese noch einen Wert, der frei bestimmbar ist. Beispiele für HTML-Attribute sind das src-Attribut bei Bildern und Videos oder das href-Attribut bei Links:
<img src="./bilder/madu.png">
<video src="./bilder/madu.png">
<a href="https://wikipedia.org">Hier geht es zu Wikipedia!</a>Dies sind Attribute, die einen Wert mitbekommen müssen. Dieser wird nach dem Gleichzeichen (=) in Anführungsstrichen (") geschrieben. Es gibt jedoch auch Attribute, denen kein Wert zugewiesen werden muss, damit diese das HTML-Element beeinflussen. Ein Beispiel hierfür ist das hidden Attribut. Dieses sorgt dafür, dass das Element nicht auf der Seite sichtbar ist.
<p hidden>
Hallo! Ich bin ein Absatz und für den Nutzer auf der Webseite nicht sichtbar!
</p>Von diesen gibt es noch haufenweise andere. Jedoch sollten sie, wie auch Tags, nicht auswendig gelernt werden! Das einzig wichtige ist es, dass du verstehst, wie Tags und Attribute funktionieren und miteinander agieren. Die einzelnen Tags und Attribute lernst du anhand von "learning by doing" oder googeln. Nutzt du diese regelmäßig, wird es dir immer leichter fallen, diese im Kopf zu behalten.