</> HTML lernenAIIT Angewandte Informatik · 1. Klasse · Lienz
Modul auswählen
  1. 01Start mit Visual Studio Code
  2. 02Absätze und Überschriften
  3. 03Text fett kursiv und durchgestrichen
  4. 04Listen Links und Bilder
  5. 05Tabellen mit sichtbarem Rahmen
  6. 06Ein YouTube Video einbetten
  7. 07CSS direkt im HTML
  8. 08Eine eigene CSS Datei
  9. 09Meine Hobbyseite fertig gestalten
  10. 10Klassen ganz einfach

Modul 3

Text fett kursiv und durchgestrichen

TAGESZIELIch kann einzelne Wörter hervorheben, unterstreichen und durchstreichen.
Handout als PDF

Tags können auch innerhalb eines Absatzes stehen. Du markierst damit nur einen Teil des Textes. Die umschließenden p-Tags bleiben bestehen. Schließe immer zuerst den inneren Tag und dann den äußeren.

Nur die gewünschten Wörter verändern

Du musst nicht den ganzen Absatz fett machen. Setze <b> unmittelbar vor die Wörter, die auffallen sollen, und </b> direkt dahinter. Der restliche Satz bleibt normal. Mit i funktioniert es genauso. Die äußeren p-Tags umschließen weiterhin den vollständigen Absatz.

Lies den Code von außen nach innen: Zuerst beginnt der Absatz, dann beginnt die Hervorhebung. Beende zuerst die Hervorhebung und danach den Absatz. In <p>Ich mag <b>Robotik</b>.</p> wird nur Robotik fett. Der Punkt gehört noch zum Absatz.

Gestaltung mit einem Grund

Hebe wenige wichtige Wörter hervor. Wenn alles fett oder unterstrichen ist, fällt nichts mehr besonders auf. strong passt zu einem wichtigen Hinweis, zum Beispiel zum sorgfältigen Umgang mit Werkzeug. em kannst du für ein Wort verwenden, das beim Vorlesen besonders betont werden soll.

Durchstreichen passt zu einer Angabe, die sich geändert hat: Ein Treffen war am Montag und findet jetzt am Dienstag statt. Der alte Termin steht in s, der neue daneben. Zum Unterstreichen übernimmst du die span-Zeile aus dem Beispiel. Wie die style-Angabe darin arbeitet, lernst du später genauer.

Mit b wird Text normalerweise fett dargestellt, mit i kursiv. strong kennzeichnet etwas besonders Wichtiges und wird meist ebenfalls fett angezeigt. em betont ein Wort und wird meist kursiv angezeigt. s kennzeichnet eine Angabe, die nicht mehr stimmt. Für eine reine Unterstreichung verwenden wir eine kleine fertige Stil-Angabe; CSS erklären wir ab Modul 7.

Die Bausteine

SchreibweiseBedeutung
<b>Text</b>Fett hervorheben.
<i>Text</i>Kursiv darstellen.
<strong>Wichtig</strong>Besondere Wichtigkeit, meist fett.
<em>wirklich</em>Betonung, meist kursiv.
<s>Alter Termin</s>Nicht mehr gültige Angabe durchstreichen.
<span style="text-decoration: underline;">Text</span>Text unterstreichen.

Textgestaltung im body

index.html · im body
<p>Mein Hobby ist <b>Robotik</b>.</p>
<p>Mein Projekt heißt <i>Mini-Bot</i>.</p>
<p><strong>Wichtig:</strong> Zuerst planen.</p>
<p>Das macht mir <em>wirklich</em> Spaß.</p>
<p>Treffen: <s>Montag</s> jetzt Dienstag.</p>
<p><span style="text-decoration: underline;">
  Mein nächstes Ziel
</span></p>

span umfasst hier nur die Wörter, die unterstrichen werden sollen. Unterstreiche sparsam: Im Web sehen unterstrichene Wörter häufig wie Links aus. Den älteren Tag strike verwenden wir nicht. u gibt es ebenfalls, er dient aber einer inhaltlichen Kennzeichnung, etwa eines Schreibfehlers, und ist kein allgemeiner Gestaltungstag.

Deine Aufgabe

Arbeite in deinem Ordner mein-hobby weiter. Bearbeite die Schritte der Reihe nach. Verwende dein eigenes Hobby und formuliere eigene Sätze. Speichere nach jedem größeren Arbeitsschritt und sieh dir das Ergebnis im Browser an.

  1. Arbeite in deinen vorhandenen Absätzen weiter. Wähle drei wichtige Begriffe und mache sie mit b fett. Der übrige Text soll normal bleiben.
  2. Ergänze einen Absatz mit zwei bis drei Sätzen über ein besonderes Erlebnis bei deinem Hobby. Schreibe einen passenden Namen oder Begriff darin kursiv mit i.
  3. Schreibe einen hilfreichen Hinweis für Anfänger. Kennzeichne die Wörter Wichtig für den Anfang mit strong. Erkläre danach in zwei Sätzen, was man beachten soll.
  4. Ergänze einen Satz, in dem du ein Wort mit em betonst. Lies dir den Satz leise vor und überlege, ob die Betonung zu deiner Aussage passt.
  5. Unterstreiche eine kurze Wortgruppe mit dem gezeigten span-Beispiel. Übernimm die Anführungszeichen, den Doppelpunkt und das Semikolon genau.
  6. Schreibe einen geänderten Termin oder ein geändertes Ziel auf. Setze nur die alte Angabe in s und schreibe die neue daneben. Erkläre die Änderung in einem weiteren Satz.
  7. Sieh dir die Seite im Browser an. Entscheide, ob wichtige Wörter gut auffallen. Nimm überflüssige Hervorhebungen zurück, damit längere Texte angenehm lesbar bleiben.
Heute entsteht

Auf deiner Hobbyseite sieht man fett, kursiv, unterstrichen und durchgestrichen.

Zum Abschluss

Kreuzworträtsel

Sechs Begriffe aus diesem Modul. Ein Kästchen steht für einen Buchstaben. Schreibe groß, ohne Leerzeichen: Ä = AE, Ö = OE, Ü = UE, ß = SS. Fülle das Rätsel auf deinem Handout aus.

Leeres Kreuzworträtsel für Modul 3; die nummerierten Hinweise folgen darunter.
Zum Vergrößern anklicken. Die Druckvorlage findest du im Abschlussblatt.

Waagrecht →

  • 3. So erscheint i normalerweise. (6 Buchstaben)
  • 5. So erscheint b normalerweise. (4 Buchstaben)
  • 6. Tag um die Wörter im Unterstreichungsbeispiel. (4 Buchstaben)

Senkrecht ↓

  • 1. Dafür steht em in einem Satz. (8 Buchstaben)
  • 2. Das bewirkt text-decoration: underline; (14 Buchstaben)
  • 4. Tag für besondere Wichtigkeit. (6 Buchstaben)

Abschlussblatt als PDF

Drei Abschlussfragen

  1. Erkläre den Unterschied zwischen b und strong.
  2. Schreibe einen Satz mit einem alten und einem neuen Termin. Markiere den alten mit s.
  3. Warum sollte nicht der ganze Text fett und unterstrichen sein?

Online-Quiz

Zehn Fragen, jeweils eine richtige Antwort. Klicke dich durch und erhalte am Ende deine Punkte mit kurzen Erklärungen. Keine Anmeldung nötig.

Online-Quiz starten · Modul 3