Kleines Nachschlagewerk Informatik
Textblöcke
Worum geht es?
Text lässt sich zusammenfassen. Dabei kann man zum einen klassische Abschnitte mit Einzug und Abstand bzw. Textboxen mit fester Breite erstellen. Das sieht dann einfach schön aus.

Man kann aber auch aus einem Text Teile herausnehmen und diesen eine andere Farbe oder eine andere Schriftart verpassen.
Absätze
Einen Text in Absätze zu unterteilen, erhöht die Lesbarkeit enorm. Einen Absatz beginnt man mit <p> und beendet ihn mit </p>.

      <p>Der erste Absatz. Der erste ...</p>
      <p>Der zweite Absatz. Der zweite ...</p>
      <p>Der dritte Absatz. Der dritte ...</p>
            
Und so sieht es aus: Drücken
Verfeinerungen
Absätze sehen schöner aus, wenn der erste Buchstabe etwas nach rechts geschoben wird.

      <p style="text-indent:1em;">Der erste Absatz. Der erste ...</p>
      <p style="text-indent:1em;">Der zweite Absatz. Der zweite ...</p>
      <p style="text-indent:1em;">Der dritte Absatz. Der dritte ...</p>
            
Und so sieht es aus: Drücken
Textbereiche mit div
Mit dem div-Tag kann man ähnlicxh dem Absatz einen Textbereich festlegen. Dies ist der übliche Weg, wenn man Textboxen erstellen möchte. Auch diese Seite nutzt dies.

      Etwas Text...
      <div>Text im div-Block</div>
      Und wieder anderer Text...
            
Die textboxen wurden schon angesprochen und sollen auch gezeigt werden. Man kann Breite, Start, Hintergrundfarbe und vieles weitere angeben.

      <div style="position:relative;left:20%;width:60%;">
          Eine Box, die 20% des Platzes am linken Rand lässt
          und 60% der Breite beansprucht.
      </div>
            
Und so sieht es aus: Drücken
Verfeinerungen
Textboxen brauchen, um als solche erkennbar zu sein, oft eine Hintergrundfarbe.

      <div style="position:relative;left:20%;width:60%;background-color:lightgrey">
          Eine Box, die 20% des Platzes am linken Rand lässt
          und 60% der Breite beansprucht.
      </div>
            
Und so sieht es aus: Drücken

Nun steht der Text aber zu nahe am Rand. Etwas Platz muss angegeben werden.

      <div style="position:relative;left:20%;width:60%;background-color:lightgrey;padding:5px">
          Eine Box, die 20% des Platzes am linken Rand lässt
          und 60% der Breite beansprucht und innen 5 Pixel Platz lässt.
      </div>
            
Und so sieht es aus: Drücken

Zum Schluss soll die Box noch verfeinert werden. Die Ecken werden abgerundet und die Box bekommt einen Schatten.

      <div style="position:relative;left:20%;width:60%;background-color:lightgrey;
                  padding:5px;border-radius:5px;box-shadow:5px 5px 5px #999;">
          Eine Box, die 20% des Platzes am linken Rand lässt
          und 60% der Breite beansprucht.
      </div>>
            
Und so sieht es aus: Drücken
Textbereiche mit span
Textbereiche mit div haben immer einen Rand, sind also den Absätzen ähnlich. Was aber macht man, wenn man aus einem Text nur ein Wort herausnehmen und z.B. einfärben möchte? Dann nimmt man span.

      Das ist ein Text, in dem ein <span style="color:red">Wort</span>
      rot eingefärbt wird.
            
Und so sieht es aus: Drücken