Responsive Webseiten-Vorlage

Startseite > Textstrukturierung

Texte strukturieren, leichte Lesbarkeit

Hier geht es um Text-Strukturierung und um leichte Lesbarkeit von Text auf Webseiten: Überschriften und Fließtext, Textumfluß links neben rechts angeordnetem Bild, Textumfluß rechts neben links angeordnetem Bild, vorformatierte Textblöcke zB für Quelltext, Zitatblock nach Forumsart anzeigen.

• ⇓ Überschriften (Elemente hx) und Fließtext (Element p)
• ⇓ Textumfluß links neben rechts angeordnetem Bild
• ⇓ Textumfluß rechts neben links angeordnetem Bild
• ⇓ Vorformatierte Textblöcke (Quelltext) ausgeben
• ⇓ Zitatblock nach Forumsart anzeigen (Element blockquote)

Überschriften (Elemente hx) und Fließtext (Element p)

Die Anzeigeeigenschaften für Überschriften und Absätze (Schriftart, Schriftgröße, Schriftstil, Ausrichtung und Farbe) sind durch Regeln in der CSS-Stylesheet-Datei regeln.css festgelegt.

HTML-Quelltext (ohne Spalten, nur Auszug):

<h2 id="inhalt">Texte strukturieren, leichte Lesbarkeit</h2>
<p>Hier geht es um Text-Strukturierung ...</p>

<h3 id="a1">Überschriften (Elemente hx) und Fließ...</h3>
<p>Überschriften werden in HTML durch die Elemente ...</p>
  

Überschriften (Elemente h2 und h3): zusätzliche Klassen

Für die Elemente h2 und h3 können Sie bei Bedarf folgende (in der CSS-Datei regeln.css festgelegte) zusätzliche Klassen verwenden:

<h2 class="mittig">...</h2> : richtet die Überschrift mittig aus

<h3 class="mittig">...</h3> : richtet die Überschrift mittig aus

Absatz (Element p): zusätzliche Klassen

Für das Element p können Sie bei Bedarf folgende (in der CSS-Datei regeln.css festgelegte) zusätzliche Klassen verwenden:

<p class="mittig">...</p> : richtet den Absatz mittig aus

<p class="klein">...</p> : zeigt den Absatz in kleinerer Schrift an

<p class="randoben">...</p> : zeigt für den Absatz einen oberen Rand an

<p class="balken">...</p> : zeigt den Absatz mit farbigem Hintergrund an (für Zwischenüberschriften geeignet, siehe oben HTML-Quelltext ...)

Sie können auch mehrere Klassen kombinieren: Beispiel:
<p class="mittig klein">...</p>

Textumfluß links neben rechts angeordnetem Bild

Beispieltext und Beispielbild

Rhodos liegt am südöstlichen Rand des Ägäischen Meeres und gehört geografisch zur Inselgruppe der Südlichen Sporaden. Mit 1400 km² Fläche ist Rhodos nach Kreta, Euböa und Lesbos die viertgrößte griechische Insel. Die Küstenlinie mißt 222 km Länge. Rhodos ist 77 km lang und 35 km breit und hat die Form eines Delfins, der nach Nordosten in Richtung türkische Küste schwimmt. Die geringste Entfernung von Rhodos zur türkischen Küste beträgt knapp 10 Seemeilen. Mit den Koordinaten 36° Nord und 28° Ost liegt Rhodos etwa auf der gleichen Breite wie Tokio und auf der gleichen Länge wie Johannesburg. Während der nördliche und der südliche Teil sowie die Küsten von Rhodos überwiegend flach sind, ist das Innere der Insel von den Gebirgen Ataviros und Profitis Ilias geprägt ... Das Bild zeigt den Apollo-Tempel auf der Akropolis der Stadt Rhodos.

HTML-Quelltext:

<div class="bildrechts200">
  <img src="..." alt="...">
</div>
<p>Rhodos liegt am ...</p>
  

CSS-Quelltext:

.bildrechts200 {float:right; ...}
.bildrechts200 img {width:200px; height:150px; ...}

Textumfluß rechts neben links angeordnetem Bild

Beispieltext und Beispielbild

Lovran liegt an der Ostküste der kroatischen Halbinsel Istrien südlich von Opatija. Lovran ist der südliche Endpunkt der insgesamt zwölf Kilometer langen Uferpromenade Obalno Šetalište Franza Josefa I, die über Opatija (etwa neun Kilometer entfernt) bis nach Volosko im Norden führt. Die verwinkelte mediterrane Altstadt mit den schmalen Gassen, die lange Uferpromenade entlang der Opatija Riviera und der Blick auf die gegenüber liegende Insel Cres begeistern mich immer auf's Neue. Berühmtester Sohn Lovrans ist Vicko Palmic als Mitglied der österreichisch-ungarischen Nordpolexpedition Weyprecht-Payer 1872-1874, der zum weltweiten Ruhm der Verlässlichkeit, Beherztheit und Unerschrockenheit kroatischer Matrosen beigetragen hat (Inschrift der Gedenktafel an seinem Geburtshaus in der Altstadt). - Das Bild zeigt den Lovraner Kirchenplatz in abendlicher Stimmung.

HTML-Quelltext:

<div class="bildlinks200">
  <img src="..." alt="...">
</div>
<p>Lovran liegt an der Ostküste ...</p>
  

CSS-Quelltext:

.bildlinks200 {float:left; ...}
.bildlinks200 img {width:200px; height:150px; ...}

Vorformatierte Textblöcke (Quelltext) ausgeben

<pre>
  (hier steht vorformatierter Text)
</pre>
  

Zitatblock nach Forumsart anzeigen (Element blockquote)

(Beispiel-Zitatblock:) alte Weisheit

Einfachheit ist die höchste Form der Perfektion

- Leonardo da Vinci -

HTML-Quelltext:

<blockquote>
  Einfachheit ist die höchste Form der Perfektion
  <p>- Leonardo da Vinci -</p>
</blockquote>