Donnerstag, 8. Mai 2014

Überschriften in HTML

In HTML gibt es für Überschriften das Tag <h1> bis <h6> (h = heading = Überschrift). Diese Tags bestehen immer aus Start- und End-Tag. Die Zahl ist sozusagen eine Ebene. Zwischen den Start- und End-Tag steht der Text der Überschrift. Hier ein Beispiel dazu:

  1. <html>
  2.         <head>
  3.                 <title> Textstrukturierung in HTML </title>
  4.         </head
  5.         <body>
  6.                 <h1>Erste Überschrift</h1>
  7.                 <h2>Zweite Überschrift</h2>
  8.                 <h3>Dritte Überschrift</h3>
  9.                 <h4>Vierte Überschrift</h4>
  10.                 <h5>Fünfte Überschrift</h5>
  11.                 <h6>Sechste Überschrift</h6>
  12.         </body>
  13. </html>

Man sollte darauf achten, dass die Nummer des Start- und End-Tags identisch sind. Im Browser wird unser Beispiel so angezeigt:
Wie wir sehen ist die erste Überschrift die Größte und die nächste Überschriften werden immer kleiner. Dies sind die Standardeinstellungen der Tags <h1> bis <h6>. Wenn die Textausrichtung nicht  angegeben wird, wie im Beispiel, wird die Überschrift standardmäßig linksbündig Ausgerichtet. Jede Überschrift ist ein Absatz, d.h. nach dem End-Tag wird eine Leerzeile hinzugefügt und eine neue Zeile begonnen.

Mit dem Attribut align (Ausrichtung) ist es uns möglich die Überschrift nicht nur linksbündig auszurichten.
Es gibt vier Möglichkeiten den Text auszurichten. Left (links) richtet den Text linksbündig aus, dies ist die Standardeinstellung von HTML und braucht normal nicht verwendet werden. Center (zentriert) richtet den Text mittig aus. Right (recht) richtet den Text rechtsbündig aus. Justify (justieren) richtet den Text als Blocksatz aus (der Abstand der einzelnen Wörter wird angepasst, wenn man die Fenstergröße mit der Maus manuell verändert, kann man es sehr gut beobachten, dass die Abstände sich verändern.

Hier der Beispielcode dazu:

  1. <html>
  2.         <head>
  3.                 <title> Textstrukturierung in HTML </title>
  4.         </head
  5.         <body>
  6.                 <h4 align="center">Erste Überschrift</h4>
  7.                 <h2 align="right">Zweite Überschrift</h2>
  8.                 <h1 align="left">Dritte Überschrift</h1>
  9.                 <h2 align="justify">Hier kommt ein etwas längere Überschrift um den Blocksatz zu demonstrieren und dafür muss er einfach etwas länger sein.
  10.         </body>
  11. </html>

Das Attribut align muss im Start-Tag nach den Überschriftenebene stehen und mit den = die Textausrichtung angegeben werden.

Keine Kommentare:

Kommentar veröffentlichen