Startseite
Aufbau von HTML-Dokumenten  
xgdown Grundgerüst eines HTML-Dokumentes
xgdown Einfache Textausgabe
xgdown Absätze ausrichten
xgdown Überschriften
xgdown HTML-Elemente gruppieren
xgdown Kommentare einfügen
xgnext Aufgaben

Feedback     Interesse an einer CD ?    

Grundgerüst eines HTML-Dokumentes

Ein HTML-Dokument besteht aus zwei wesentlichen Bereichen:

  • Kopfbereich
  • Rumpfbereich

Beispiel:
<html>
   <head>
     <title>Titel des Dokuments</title>
   </head>

  <body>
         Hier befindet sich das eigentliche Dokument
     </body>

</html>
So sieht das aus:
Weitere Informationen zu Kopfdaten

Ändern der Hintergrundfarbe:

bgcolor Über das Attribut bgcolor können Sie innerhalb des <body>-Tags die Hintergrundfarbe wechseln.

Es gibt 16 standardisierte Farbnamen:
black = schwarz maroon = dunkelrot green = dunkelgruen olive = olivegruen
navy = dunkelblau purple = violett teal = blaugruen gray = dunkelgrau
silver = hellgrau red = rot lime = hellgruen yellow = gelb
blue = blau fuchsia = magneta aqua = hellblau white = weiss

Beispiel:
<html>
   <head>
     <title>Titel des Dokuments</title>
   </head>

  <body bgcolor="aqua">
         Dieser Text befindet sich auf einem hellblauen Hintergrund
     </body>

</html>
So sieht das aus:

Einfache Textausgabe

Textabsatz und Zeilenumbruch

<br> Der Tag <br> (break) erzeugt einen Zeilenumbruch.
Die nächste Zeile wird direkt darunter mit dem aktuellen Zeilenabstand dargestellt.
Dieser Tag besitzt kein Ende-Tag.
<p>...</p> Einen Absatz fügen Sie mit den beiden Tags ein.
<p> steht hierbei für Paragraph (Absatz).
Vor und nach dem Absatz wird ein größerer Abstand eingefügt (in der Regel eine Zeile).
Innerhalb dieser Tags dürfen Sie keine weiteren Blockelemente verwenden, z.B. den Tag <p> selbst.

Beispiel:
<html>
   <head>
     <title>Die Beerdigung</title>
   </head>

   <body>
  <p>Beerdigung eines Herzspezialisten</p>

    <p>Bei der Beerdigung eines Herzspezialisten<br>
                 wird ein großes, zweiteiliges Herz aus Holz aufgebaut.<br>
                 Nach der Rede des Pfarrers<br>
                 teilt sich das Herz,<br>
                 der Sarg wird durchgeschoben und das Herz schließt sich wieder.<br>
                 In diesem Moment fängt einer der Trauergäste laut an zu Lachen.<br>
                 Sein Nachbar stößt ihn an.<br>
                 Sie können bei einer Beerdigung doch nicht lachen!</p>

    <p>Tut mir leid,<br>
                 ich musste mir gerade meine eigene Beerdigung bildlich vorstellen.<br>
                 Was kann daran so lustig sein?,<br>
                 Ich bin Gynäkologe!</p>
   </body>

</html>
So sieht das aus:

Zeilenumbruch verhindern

<nobr>...</nobr> Die Textpassage, die nicht getrennt werden soll, wird innerhalb des Tags
<nobr> und </nobr> angegeben. (nobr - no break - kein Umbruch).

Beispiel:
<html>
   <head>
     <title>Nobreak</title>
   </head>

   <body>

             Gestern Abend, es war schon sehr spät, habe ich<nobr>87 Sterne</nobr>
             am Abendhimmel gezählt.

         </body>

</html>
So sieht das aus:

Absätze ausrichten

Der Text innerhalb eines Absatzes wird standardmäßig linksbündig ausgerichtet.
Sie haben jedoch auch die Möglichkeit, Text rechtsbündig, zentriert oder als Blocksatz auszurichten.
Zur Festlegung der Ausrichtung wird im Tag <p> das Attribut align verwendet.

align="Wert" Das Attribut align (Ausrichtung) gibt an, wie der nachfolgende Text ausgerichtet werden soll.
Die möglichen Werte sind: 
      left            linksbündig
      center      zentriert
      right         rechtsbündig
      justify      Blocksatz
Wird das Attribut nicht angegeben, richtet der Browser den nachfolgenden Text standartmäßig linksbündig (left) aus.

Beispiel:
<html>
   <head>
     <title>Align</title>
   </head>

   <body>

   <p align="left">linksbündiger Text</p>
   <p align="center">zentrierter Text</p>
   <p align="right">rechtsbündiger Text</p>
   <p align="justify">Blocksatz .....</p>

   </body>

</html>
So sieht das aus:

Beispiel:
<html>
   <head>
     <title>Die Beerdigung</title>
   </head>

   <body>
  <p align="center">Beerdigung eines Herzspezialisten</p>

    <p>Bei der Beerdigung eines Herzspezialisten<br>
                 wird ein großes, zweiteiliges Herz aus Holz aufgebaut.<br>
                 Nach der Rede des Pfarrers<br>
                 teilt sich das Herz,<br>
                 der Sarg wird durchgeschoben und das Herz schließt sich wieder.<br>
                 In diesem Moment fängt einer der Trauergäste laut an zu Lachen.<br>
                 Sein Nachbar stößt ihn an.<br>
                 Sie können bei einer Beerdigung doch nicht lachen!</p>

    <p align="right">Tut mir leid,<br>
                 ich musste mir gerade meine eigene Beerdigung bildlich vorstellen.<br>
                 Was kann daran so lustig sein?,<br>
                 Ich bin Gynäkologe!</p>
   </body>

</html>
So sieht das aus:

Überschriften

HTML unterscheidet 6 Überschriftenebenen, um Hierarchieverhältnisse in Dokumenten abzubilden. 

<h1>......</h1>
<h2>......</h2>
<h3>......</h3>
<h4>......</h4>
<h5>......</h5>
<h6>......</h6>
Diese Tags formatieren den eingeschlossenen Text als Überschrift.
Der Tag <h..> steht hierbei für heading (Überschrift).
Die nachfolgende Zahl bezeichnet die Gliederungsebene der Überschrift
Über den Tag <h1>......</h1> wird die höchste Ebene und über den Tag <h6>......</h6>die niedrigste Ebene definiert.
Die Schrifthöhe nimmt von der höchsten zur niedrigsten Ebene ab.
Überschriften können wie Absätze mithilfe des Attributs align ausgerichtet werden.
Beispielsweise wird eine Überschrift über die Anweisung <h1 align="center"> zentriert ausgerichtet.

Beispiel:
<html>
   <head>
     <title>Überschriften</title>
   </head>

   <body>


   <h1 align="center">Überschrift 1. Ordnung <h1>
   <h2>Überschrift 2. Ordnung<h2>
   <h3>Überschrift 3. Ordnung<h3>
   <h4>Überschrift 4. Ordnung<h4>
   <h5>Überschrift 5. Ordnung<h5>
   <h6>Überschrift 6. Ordnung<h6>


   </body>

</html>
So sieht das aus:

Beispiel:
<html>
   <head>
     <title>Die Beerdigung</title>
   </head>

   <body>
  <h2 align="center">Beerdigung eines Herzspezialisten</h2>

    <p>Bei der Beerdigung eines Herzspezialisten<br>
                 wird ein großes, zweiteiliges Herz aus Holz aufgebaut.<br>
                 Nach der Rede des Pfarrers<br>
                 teilt sich das Herz,<br>
                 der Sarg wird durchgeschoben und das Herz schließt sich wieder.<br>
                 In diesem Moment fängt einer der Trauergäste laut an zu Lachen.<br>
                 Sein Nachbar stößt ihn an.<br>
                 Sie können bei einer Beerdigung doch nicht lachen!</p>

         <p align="right">Tut mir leid<br>
                 ich musste mir gerade meine eigene Beerdigung bildlich vorstellen.<br>
                 Was kann daran so lustig sein?,<br>
                 Ich bin Gynäkologe!</p>
   </body>

</html>
So sieht das aus:

HTML-Elemente gruppieren

Blöcke erzeugen

<div>...</div> Dieser Tag umschließt mehrere Absätze, die verschiedene HTML-Elemente wie Text, Grafiken, Tabellen usw. enthalten können.
Den umschlossenen Bereich können Sie mit dem Attribut align ausrichten.
Auch enthaltene Grafiken und Tabellen werden nach dem angegebenen Wert ausgerichtet.

Beispiel:
<html>
   <head>
     <title>Der Tag div</title>
   </head>

   <body>

   <div align="center">
   <p>Das ist der erste zentrierte Absatz .................</p>
   <p>Das ist der zweite zentrierte Absatz .................</p>
                Auch dieser Text, der nicht in einem Absatz steht, ist zentriert.
   </div>
   <p>Dieser Absatz steht außerhalb der Zentrierung</p>
   </body>

</html>
So sieht das aus:

Inline-Blöcke erstellen

<span>...</span> Um kürzere Abschnitte im Fließtext zu gruppieren, wird der Tag <span> verwendet.
Wenn Sie nur mit HTML-Elementen arbeiten, hat die Verwendung des Tags keinen Nutzen.
Bei einer Verwendung von StyleSheets (CSS) haben Sie allerdings die Möglichkeit zahlreiche Formatierungen auf den speziellen gruppierten Text anzuwenden.

Beispiel:
<html>
   <head>
     <title>Der Tag span</title>
   </head>

   <body>

    Ein Teil des folgendes Textes wird durch einen
    <span style="color:red; border:blue 1px dotted">Inline-Block</span>
    gruppiert und durch
     <span style="background:lightblue; font-family:verdana; font-style:italic;">
    StyleSheets</span>formatiert.

   </body>

</html>
So sieht das aus:

Kommentare einfügen

<!--
Kommentar
 --> 		Einen Kommentar leiten Sie mit der Zeichenfolge <!-- ein und schließen ihn durch die Zeichenfolge --> ab.
Kommentare dienen dem Hinzufügen von zusätzlichen Informationen und sind nur im Quelltext lesbar.
Ein Browser zeigt den Inhalt von Kommentaren nicht an.

Beispiel:
<!-- Hier beginnt der Kopf -->
<html>
   <head>
     <title>Titel des Dokuments</title>
   </head>
<!-- Hier endet der Kopf -->
<!-- Hier beginnt der Rumpf -->
   <body>
   Hier befindet sich das eigentliche Dokument
   </body>
<!-- Hier endet der Rumpf -->
</html>
So sieht das aus: