Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Beispielseiten

Inhaltsbereich

3.3 Fließtext: Absätze und Hervorhebungen

Zwischen den Überschriften steht der Fließtext, und der besteht zu einem großen Teil aus Absätzen, Hervorhebungen und Listen.

Absätze: p wie paragraph

Das wahrscheinlich am häufigsten verwendete HTML-Element ist p, kurz für »paragraph«, auf Deutsch »Absatz«. Jeder normale Fließtextabsatz auf einer Webseite wird mit <p> eingeleitet und mit </p> beendet.

ToDo: Einen normalen Fließtextabsatz erstellen
  1. Ergänzen Sie auf der Beispielseite den hervorgehobenen Quelltext:

    <div id="kopfbereich">
    <h1>Little Boxes</h1>
    <p>Webseiten gestalten mit HTML und CSS. Grundlagen.</p>
    </div>

  2. Speichern Sie die Seite und betrachten Sie sie in einem Browser.

p ist ein Block-Element (siehe Seite 64) und darf keine anderen Block-Elemente enthalten, auch kein weiteres p.

Der Abstand zwischen den Überschriften und Absätzen

Die meisten Browser fügen vor und nach Überschriften und Absätzen einen Abstand hinzu. Versuchen Sie momentan gar nicht erst, diesen zu entfernen. In HTML geht das nicht, später mit CSS ist es einfach.

Text hervorheben: strong und em

Die Elemente strong und em sind zur Hervorhebung von Text gedacht. Beide sind Inline-Elemente (im Buch siehe Seite 64), werden also nur so breit wie der enthaltene Text und erzeugen keinen eigenen Zeilenumbruch:

  • strong bedeutet stark hervorheben und wird in visuellen Browsern meist fett gedruckt.
  • em hingegen steht für emphasize, auf Deutsch betonen. em wird meist kursiv dargestellt.

Als Faustregel benutzen Sie strong, um den Text bereits vor dem Lesen hervorzuheben, und em, wenn er erst während des Lesens auffallen soll.

ToDo: Text mit strong und em hervorheben
  1. Ergänzen Sie den Textbereich auf der Beispielseite wie folgt:

    <div id="textbereich">
    <h2>Startseite</h2>
    <p>Webseiten bestehen aus <strong>rechteckigen Kästchen</strong>,
    die über-, neben- und ineinandergestapelt werden. Alles Runde ist
    entweder Trick, Grafik oder beides.</p>
    <p>Die folgenden Schritte zeigen den Weg vom Zusammenbauen der
    <em>Kisten</em> bis zur fertig gestalteten <em>Webseite</em>:</p>

    </div> <!-- Ende textbereich -->

  2. Speichern Sie die Seite und betrachten Sie sie im Browser.