3.4.Absatzformatierung

3.4. Absatzformatierung

3.4.1 Zeichenformatierung

Zeichen in Absätzen und Überschriften lassen sich mit den schon bekannten Eigenschaften font, color, background-color und border formatieren.

Beispiel:

      <DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
       <html>
        <head>
         <title>listing 3.4.1</title>
        </head>
        <body>
         <p style="font:italic 14pt Arial; color:rgb(0%,100%,100%); background-color:rgb(50%,0%,20%); 
          border:solid 3px rgb(100%,0%,0%);">
          Dieser Absatz ist in kursiv 14pt Arial türkis auf pinkfarbenem 
          Hintergrund mit rotem Rahmen dargestellt.
         </p>
        </body>
       </html>  
      

3.4.2 Ausrichtung

Die Ausrichtung wird durch die Eigenschaft text-align mit den möglichen Werten left, center, right und justify (Blocksatz) gesteuert. Ein Anwendungsbeispiel erscheint im folgenden Abschnitt.

3.4.3 Zentrale Formatierung

Der eigentliche Sinn der Absatzformatierung besteht in der Einrichtung von Formatvorlagen für Absätze, Überschriften und Tabellen im head-Element.

Beispiel:

      <DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
       <html>
        <head>
         <title>listing 3.4.2</title>
         <style type="text/css">
          p { font:normal 14pt Arial; 
              color:rgb(100%,100%,100%); 
              background-color:rgb(0%,0%,100%); text-align:justify; }
          h1 { font:bold 16pt Arial; 
               color:rgb(100%,100%,0%); 
               background-color:rgb(0%,0%,100%); 
               text-align:left; }
         </style>
        </head>
        <body>
         <h1>
          Alle Überschriften in diesem Text sind nun fettgedruckt 16 pt Arial 
          gelb auf blauem Grund links ausgerichtet. 
         </h1>
         <p>
          Alle Absätze in diesem Text sind nun normal 14 pt Arial 
          weiß auf blauem Grund im Blocksatz. 
          Die Hintergrundfarbe für das gesamte Dokument wird man aber 
          normalerweise im BODY-Element festlegen.
         </p>
        </body>
       </html>  
      

Erklärung: Das style-Element <style type="text/css">...</style> schließt die Formatvorlagen ein. Eine Formatvorlage besteht aus dem jeweiligen Textelement mit seinen Eigenschaften in geschweiften Klammern.

Aufgabe 3.4.1

Formuliere den Quelltext für das folgende HTML-Dokument und speichere es unter dem Titel Aufgabe 3.4.1.