02 Texte in HTML

Einstieg in das Thema

Worum geht es?

Du hast schon HTML-Dokumente gesehen und weißt um deren Aufbau. Nun geht es um die Struktur des Textes. Überschriften und Absätze sollen erkennbar sein.

Was ist das Ziel?

Am Ende sollst du ein paar wichtige (aber nicht alle) Tags zur Formatierung von Text kennen. Dazu werden Absätze, Überschriften und Aufzählungen gehören.

Du kannst also ein HTML-Dokument erstellen, welches folgendes Bild zeigt.

Erarbeitung

Theorie

        Autos

        Autos dienen der Fortbewegung. Man kommt also schneller von A
        nach B.

        Hier kommt eine Auflistung der wichtigsten Autos:
        - Trabant
        - Wartburg
        - Lada
        - Skoda

        Vielen Dank für Ihre Aufmerksamkeit!

Übung

Aufgaben

Aufgabe 1

"Autos" ist eine Überschrift. Informiere dich, wie man Überschriften angibt.

Aufgabe 2

Wie viele Arten/Größen von Überschriften unterstützt HTML?

Aufgabe 3

"Autos" soll die größtmögliche Überschrift werden. Ändere das Dokument entsprechend.

Aufgabe 4

Informiere dich über Absätze. Wo muss man diese einfügen, damit die gleichen Lücken entstehen wie beim Screenshot?

Aufgabe 5

Die Liste ist immer noch nicht gut. Es gibt zwei Arten von Listen, die geordneten mit Nummern und die ungeordneten mit Punkt oder Strich. Informiere dich über eine ungeordnete Liste und baue die Autos so ein.

Aufgabe 6

Warum braucht man für Listen zwei unterschiedliche Arten von Tags?

Aufgabe 7

Erweitere nun den Text um eine geordnete Aufzählung und weiteren Text. Das muss nicht sinnvoll sein!

Aufgabe 8

Gib an, wie sich geordnete und ungeordnete Listen im HTML-Text unterscheiden und welche Gemeinsamkeiten sie haben.

Vertiefung

Aufgabe 9

Probiere verschiedene Typen von Überschriften aus. Welche Stufe ist noch als Überschrift gut erkennbar?

Aufgabe 10

Versuche Absätze zu schachteln. Also ein Absatz enthält Text und zwei oder drei Absätze.

Aufgabe 11

Versuche auch Listen zu schachteln. Gern darfst du dabei geordnete und ungeordnete Listen mischen. Beschreibe kurz, wie man das macht.

Aufgabe 12

Untersuche <br>. Was macht das? Gibt es ein </br>?

Aufgabe 13

Untersuche <hr>. Was macht das, wofür kann man es nehmen und gibt es auch hier ein </hr>?

Komplexe Aufgabe

Aufgabe ohne KI

Schreibe ohne KI-Hilfe unter Verwendung der Vorlage einen Text mit einer Haupt- und zwei Unterüberschriften. Der Inhalt ist egal, darf gern kurz und lustig sein. Nach den Unterüberschriften kommen zwei Absätze mit etwas Text. Weiterhin soll eine ungeordnete Aufzählung mit mindestens drei Einträgen enthalten sein.

Lasse dein Resultat von Nachbarn oder der KI prüfen. Was waren deine beiden größten Fehler?

Zusammenfassung

Was musst du wissen/können?

Du kennst

die Tags für Überschriften,
die Tags für Absätze,
die Tags für Aufzählungen und
kannst diese anwenden.

Du kannst

die Bereiche in einem (Text-) Bild erkennen,
eine HTML-Seite passend dazu erstellen und
eine Ausgabe nach einer HTML-Datei selbst zeichnen können.

Mitschrift

Die Mitschrift erstellst du nun teilweise selbst. Sammle zuerst alles, was wichtig ist.

Danach werden wir dies gemeinsam prüfen, evtl. nachbessern und die Mitschrift erstellen.