Kommentare und Überschriften

Kommentare in HTML

Kommentare sind Tags die vom Browser nicht angezeigt werden und dem HTML Autor dabei Helfen können sich die Struktur besser zu merken.

Das folgende Beispiel zeigt ein sehr kurzes Kommentar:

 

 <!-- Kein Kommentar :-) --> 

Da wir jetzt wissen, wie wir unseren Quelltext kommentieren können, machen wir natürlich auch davon gebrauch:

<html>
   <!-- Das HTML Dokument beginnt -->
   <head>
     <!-- Der Kopf des HTML Dokuments -->
     <title>
       Hallo Titel
     </title>
   </head>
   <body>
     <!-- Der Inhalt des HTML Dokuments -->
     Hallo Welt
   </body>
</html>



Zugegeben, wir haben an Kommentaren nicht gespart. Das soll dir aber gleich zu Anfang zeigen, dass Kommentare sinnvoll sind.

Nun öffnen wir unsere Seite wieder im Browser. Wir stellen fest, dass sich durch die Kommentare am Aussehen der Seite nichts verändert hat. Und wenn wir uns die Seite länger ansehen, fällt uns auf, dass sie ein bisschen langweilig ist da der wirkliche Inhalt fehlt.

Das soll sich jetzt ändern. Wir wollen ja schließlich das unsere Nachricht jeder lesen kann. Dazu gibt es in HTML mehrere Tags, mit der wir die Schrift formatieren und strukturien können.

 

Schriftformatierung

In HTML gibt es viele Möglichkeiten das Aussehen der Schrift zu beeinflussen. Man kann z.B. einen Text als Überschrift kennzeichnen und durch die Art der Überschrift die Struktur des Dokuments wiederspiegeln.

 

Früher gab es tags zur Schriftformatierung wie z.B. den <font> Tag.Dieser sollte jedoch nicht mehr verwendet werden.Stattdessen sollten Stylesheets verwendet werden.Als erstes soll unsere Seite eine Überschrift bekommen.

Überschriften in HTML

HTML sieht für Überschriften einen bestimmten Tag vor. Dieser Tag erfordert auch einen schliessenden Tag.

Da Überschriften verschieden groß sein können und auch zur Gruppierung Textes dienen sollen gibt es 6 grössen für Überschriften.

Hier die 6 verschiedenen Tags für Überschriften an einem Beispiel:

 <h1> Überschrift 1 / Glierungsebene 1 </h1>
 <h2> Überschrift 2 / Glierungsebene 2 </h2>
 <h3> Überschrift 3 / Glierungsebene 3  </h3>
 <h4> Überschrift 4 / Glierungsebene 4 </h4>
 <h5> Überschrift 5 / Glierungsebene 5 </h5>
 <h6> Überschrift 6 / Glierungsebene 6 </h6>

Dabei ist h1 die wichtigste und grösste Überschrift. Das benutzen von Überschriften macht nur im Bereich des <body> Sinn, da Sie z.B. im Bereich des Titels nichts am aussehen ändern.

Um den neuen Tag zu testen bauen wir Ihn in unsere Seite ein und schauen uns an, wie das ganze aussieht.

Wir modifizieren den Quelltext wie folgt:

<html>
  <!-- Das HTML Dokument beginnt -->
  <head>
   <!-- Der Kopf des HTML Dokuments -->
   <title>
    Hallo Titel
   </title>
  </head>
  <body>
   <!-- Der Inhalt des HTML Dokuments -->
   <!-- Überschrift -->
   <h1>Meine zweite Seite</h1>
  </body>
 </html> 


Wenn wir unsere Modifikation abspeichern und uns die neue Seite anschauen, sollten wir etwas ähliches wie das hier sehen:

Es ist deutlich zu sehen das die Schrift jetzt größer ist. Unsere Seite sieht zwar schon ganz schön aus, aber sie ist irgendwie noch sehr leer.  Es wird also Zeit für mehr Inhalte.

Diese Inhalte gehören nicht zur Überschrift, sondern sind normaler Text. Wir sollten nach der Überschrift eine neue Zeile anfangen. Um das ganze optisch zu trennen bauen wir eine horizontale Linie ein.

Im nächsten Abschnitt lernen wir, wie wir Absätze und horizontale Linien nutzen können um Texte zu strukturieren.

 

Navigation