HTML Tags 1
Das Grundgerüst der Website steht. Wir wollen nun die Website mit Inhalt abfüllen. Dazu brauchen wir verschiedene HTML-Tags. Diese lernen wir in dieser Aufgabe kennen.
Ziel(e)
- Ich kenne unterschiedliche HTML-Tags.
- Ich kann HTML-Tags korrekt einsetzen.
Aufgabe
Suche dir in den Büroräumlichkeiten eine Zeitung (die nicht mehr gebraucht wird) und nimm dir einen interessanten Artikel daraus. Markiere alle Elemente, die du findest mit einem Leuchtstift, zum Beispiel ein Bild.
Stopp: bevor du nun weiterliest, erledige die 3 Zeilen oberhalb dieses Hinweises 😉
Und genau so funktioniert das auch mit Websites. Den Inhalt der Webseiten strukturiert man in unterschiedliche Elemente: Überschriften, Texte, Bilder, Videos etc. Um dem Browser zu sagen, jetzt folgt ein Bild, wird mit unterschiedlichen Tags gearbeitet, sogenannten HTML-Tags.
Um diese HTML-Tags kümmern wir uns nun in den nächsten Aufgaben.
Dabei ist folgendes wichtig zu wissen:
-
Tags beginnen mit < dann folgt der Tag-Name und enden mit > also z.B. table für eine Tabelle. Und ja genau du erkennst das richtig, auch beim Grundgerüst kamen schon HTML-Tags in den Einsatz!
-
In den meisten Fällen gibt es zum öffnenden HTML-Tag auch ein schliessendes HTML-Tag, das wird mit einem / nach dem < ergänzt, also z.B. p>Das ist ein Text. /p>. Leider ist das nicht immer der Fall, aber keine Angst, mit der Zeit weiss man, welche Tags nicht geschlossen werden.
-
HTML-Tags können zusätzlich Attribute enthalten, um mehr über ein HTML-Tag zu erzählen, z.B. table width="150px">…</table, dabei ist das width das Attribut und das 150 in den Anführungszeichen der Wert zum Attribut. In diesem Beispiel sagt uns das Attribut aus, dass die Tabelle 150px breit sein soll.
-
HTML-Tags und Attribute werden immer klein geschrieben
Und keine Angst, man muss nicht alle HTML-Tags auswendig können, das Internet hilft einem dabei, den richtigen HTMLTag zu finden, z.B. auf