Verschachtelungen in HTML

Bisher konnten wir einen Text nur fett oder kursiv machen. Aber geht auch beides?

Probiere folgendes Beispiel aus:

<b><i>Text :)</i></b>

Wie funktioniert das? Du kannst dir vorstellen, dass jedes Element, was wir schreiben, eine Art Rechteck innerhalb der Webseite ist. In diesem Rechteck gelten ganz spezielle Regeln. Wie etwa in <b></b>, dass Text fettgeschrieben werden muss. Ergänze ich nun innerhalb des <b></b>-Bereiches noch den <i></i>; Bereich, so gelten innerhalb dieses Bereiches zusätzlich noch die Regeln des <b></b>-Bereiches.

Das ist ähnlich wie bei Gesetzen. Erlässt die EU ein Gesetz, so müssen sich alle Mitgliedsländer an dieses halten. Zusätzlich können sie aber Gesetze erlassen, welche nur für ihr Hoheitsgebiet gelten.

Aufgabe

Öffne in deinem Browser das Entwicklerwerkzeug Inspektor, (Firefox und Chrome: Strg + Umschalt + C) Nun kannst du über alle Elemente drüberfahren und siehst ihre Rechtecke. (Beenden mit Klick auf ein beliebiges Element)

Aufgabe

Erstelle einen Text im Editor, welcher sowohl kursiv als auch fett ist.

Aufgabe

Erstelle einen Text im Editor, welcher sowohl fett als auch unterstrichen ist.

Aufgabe

Erstelle einen Text im Editor, welcher unterstrichen, kursiv und eine Überschrift der 2. Ordnung ist.

div-Element

Bisher waren von allen Elementen die Regeln schon klar festgelegt. So war etwa das <b></b>-Element klar mit fettgeschriebenem Text. Das <div></div>-Element ist nur ein Rechteck, welches so keine Regeln hat. Diese werden alle erst mit CSS festgelegt.

<div>Anarchie!</div>

Aufgabe

In dem vorbereiteten Beispiel wurden die Farben der Rechtecke festgelegt. Notiere, wie sich Regeln zueinander verhalten.