Home
  Windows
  Internet
  E-Mail
  Homepage
    Homepage I - HTML
      Hypertext Markup Language
      Syntax
      Meine erste Seite
      Formatierungen
      Bilder einfügen
      Hyperlinks
      Tabellen
      Frames
      FTP
      Tags und Attribute
Termine
Download
Kontakt

© Dietmar Becker
Microsoft Certified Professional

Formatierungen
Die Wiedergabe einer Webseite ist dynamisch, passt sich also an Bildschirmgröße, Auflösung, Fenstergröße etc. an. (verkleinern Sie doch mal die Fenstergröße Ihrer ersten Webseite!) Möchte man z. B. einen Zeilenumbruch an einer bestimmten Stelle, muss man es dem Browser durch den Tag <br> (engl.: break) bekannt geben. Dieser Tag benötigt keinen Endtag!
Einen Absatz leite ich mit dem Tag <p> ein und wird mit </p> beendet.

In unserem Beispiel...

<! -- Quellcode Anfang -->
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN//">
<html>
<head>
<title>Meine erste Seite</title>
</head>
<body>
<p>Willkommen auf meiner ersten Seite. </p>
Zugegeben, sie ist minimalistisch,<br>
doch sie soll zeigen, wie einfach es geht
</body>
</html>
<! —Quellcode Ende -->

...wird danach die Seite so angezeigt:

Ich möchte eine Überschrift? Das kann ich mit dem Tag <h1></h1> realisieren. Der zwischen den spitzen Klammern stehende Text wird nun als Überschrift1 interpretiert. (mögliche Varianten: <h1></h1> = sehr groß bis <h6></h6> = klein).

Danach vielleicht eine horizontale Linie? Der Tag <hr> erledigt es zuverlässig.

Doch den restlichen Text hätte ich gerne mittig dargestellt. Dies lässt sich mit dem Attribut eines Tags realisieren - hier die Ausrichtung. Füge ich nun dem Tag <p> das Attribut align (engl. = ausrichten) hinzu, kann man dieses Objekt rechts (right), mittig (center) oder links (left) ausrichten:

<p align="center">Zugegeben, sie ist minimalistisch,<br>
doch sie soll zeigen, wie einfach es geht </p>
Im Ganzen sieht das dann so aus:

<!-- Quellcode Anfang -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN//">
<html>
<head>
<title>Meine erste Seite</title>
</head>
<body>

<h1>Willkommen auf meiner ersten Seite.</h1>
<h2>Willkommen auf meiner ersten Seite.</h2>
<h3>Willkommen auf meiner ersten Seite.</h3>
<h4>Willkommen auf meiner ersten Seite.</h4>
<h5>Willkommen auf meiner ersten Seite.</h5>
<h6>Willkommen auf meiner ersten Seite.</h6>
<hr>
<p align="center">Zugegeben, sie ist minimalistisch,<br>
doch sie soll zeigen, wie einfach es geht </p>
</body>
</html>
<! —Quellcode Ende -->

Nachdem ich diese Änderungen vorgenommen habe, sieht unsere Seite jetzt so aus:

Weitere Möglichkeiten der Formatierung sind u. a.:
• die Schrift (Tag: <font></font>) in Größe (Attribut: size) und Art (Attribut: face) ,
• die Horizontale Linie (Tag <hr>) in einer festgelegten Breite (Attribut: width - Weite) und Größe (Attribut: size) und Farbe (Attribut: color) anzuzeigen oder
• den Text in ein Listing (Tag <li></li>) zu fassen. In unserem Beispiel könnte das so aussehen:

<!-- Quellcode Anfang -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN//">
<html>
<head>
<title>Meine erste Seite</title>
</head>
<body>

<p align="center"><font size="5" face="Courier New, Courier, mono">Willkommen auf meiner ersten Seite.</font></p>

<hr width="80%" size="50" color="blue">

<li>Zugegeben, sie ist minimalistisch,</li>
<li>doch sie soll zeigen, wie einfach es geht. </li>
</body>
</html>
<!-- Quellcode Ende -->

Wird im Internet Explorer so dargestellt:

Da wir später mit HTML-Editoren arbeiten werden, möchte ich nicht mit der Vielzahl an Tags Verwirrung stiften. Ich wollte nur das ziemlich einfache Grundprinzip der HTML-Programmierung erkennbar machen. Eine Auflistung der Tags finden Sie auf der Seite "Tags und Attribute.

Siehe auch CSS – Stile.

Verzichten wir auf solche (und weitere) Formatierungen, können wir auch einen Text mit dem Tag <pre></pre> (preformatted) "vor-formatieren". Dabei werden Zeilenumbruch, Leerzeichen/Zeilen etc. wie im Quellcode interpretiert. Schriftgröße und Schriftart werden in Standardwerten des Browsers angezeigt, wie im nächsten Beispiel.
Also wieder zurück zum Minimalismus:

<! -- Quellcode Anfang -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN//">
<html>
<head>
<title>Meine erste Seite</title>
</head>
<body>
<pre>
Willkommen auf meiner ersten Seite.


Zugegeben, sie ist minimalistisch

doch sie soll zeigen, wie einfach es geht
</pre>
</body>
</html>
<!—Quellcode Ende -->

Und im Browser sieht das dann so aus:

zurück zum Seitenanfang