HTML Tutorial

[ Inhaltsverzeichnis ]
[ 1.1 ] [ 1.2 ] [ 1.3 ] [ 1.4 ] [ 1.5 ] [ 1.6 ] [ 1.7 ] [ 2.0 ] [ 2.1] [ 2.2 ] [ 2.3 ] [ 2.4 ] [ 2.5 ] [ 2.6 ] [ 2.7 ] [ 2.8 ] [ 2.9 ] [ 3.0 ] [ 3.1 ] [ 3.2 ] [ 3.3 ]

Texte ausrichten und formatieren

HTML Quellcode:

<html>
<head>
<title>Mustermanns Blumenladen </title>
<style type="text/css">
<!--
body { background-color:#33EE00; color:#002000; font-family:Times; }
.zentriert { text-align:center; }
.hervorgehoben { font-family:Arial; font-size:200%; color:navy; }
-->
</style>
</head>
<body>
<p class="zentriert">
<span class="hervorgehoben">Willkommen</span>
</p>
<p class="zentriert">
in Mustermanns Blumenladen
</p>
<p>
... und hier steht ganz normaler Text.
</p>
</body>
</html>

So sieht's im Browser aus

Erklärung:

  • Unsere CSS-Anweisungen sind etwas erweitert. Um Text zu zentrieren und Schriftarten, Schriftgrö&szli;en und Textfarben zu verändern, gibt es die CSS-Attribute
    • font-family für die Schriftart, z.B. Times, Arial, Helvetica, Courier. Vorsicht ist geboten bei seltenen Schriftarten. Sie könnten auf einigen Computern nicht vorhanden sein und somit nicht dargestellt werden.
    • font-size für die Schriftgröße, z.B. 12pt, 200%.
    • text-align für die Ausrichtung des Textes:
      • left: linksbündig (Standardwert)
      • right: rechtsbündig
      • center: zentriert
      • justify: Blocksatz
    Daneben gibt es noch die Möglichkeit, den Text kursiv oder fett darzustellen:
    • font-style für die Schriftneigung:
      • normal: normal (Standardwert)
      • italic: kursiv
    • font-weight für die Schriftstärke:
      • bold: fett
      • bolder: extra-fett
      • lighter: dünner
    • Immer noch sehr gebräuchlich (obwohl gemäß der strengen Trennung von Form und Inhalt eines XML-Dokuments nicht ratsam) sind die Tags <i> für kursiv und <b> für fett; der so darzustellende Text wird einfach von ihnen umschlossen:

      Dieser Text ist <i>kursiv</i>, aber nicht <b>fett!</b> ergibt "Dieser Text ist kursiv, aber nicht fett!"

      Oft benutzt ist auch <code> für Schreibmaschinenschrift (= Courier oder Typewriter<tt>):
  • Wie schafft man es mit CSS, Anweisungen nicht nur für gesamte HTML-Elemente zu definieren, sondern ad-hoc einzubinden? Eine der Möglichkeiten ist die Definition einer so genannten CSS-Klasse. Syntax:

        . CSS-Klasse { ... }

    (Beachten Sie den Punkt vor dem Klassennamen!) Mit dem Attribut class und dem Wert des Klassennamens kann sie dann von jedem HTML-Element verwendet werden (nur manchmal wirkungslos, wenn das Element keine Textformatierungen verantwortet):

        <elem class="CSS-Klasse">
            ...

  • Ein gerade für CSS-Formatierungen nützliches HTML-Element ist <span>. Es hat an sich keine Wirkung, kann aber als Rahmen für "lokale", also nur auf einen kleinen Bereich bezogene, Textpassagen fungieren, z.B. für einzelne Worte. In dem obigen Beispiel zu beachten ist, dass sich die Schriftsätze des body-Elements und der CSS-Klasse hervorgehoben sich widersprechen. Es "gewinnt" diejenige Anweisung, die am weitesten innen steht, also Arial und marineblau (navy) für "Willkommen" (deswegen "Cascading Style Sheets" ...)
  • Ein Wort noch zu CSS. Die Schreibweise der Attribute ist abweichend von der XML-Notation:

    <span style="style:wert; style:wert; style:wert">text</span>

    Zu empfehlen ist jedoch, die CSS-Formatierungen in eine Datei auszulagern. Auf diese Weise sind alle Formatvorschriften außerhalb Ihres HTML-Dokuments. Dieses enthät nur noch den Inhalt.

    => Auf diese Weise trennen Sie Form und Inhalt Ihrer Webseiten!

    Mein kurzes CSS-Tutorial finden Sie hier: CSS Tutorial

[ Inhaltsverzeichnis ]
[ 1.1 ] [ 1.2 ] [ 1.3 ] [ 1.4 ] [ 1.5 ] [ 1.6 ] [ 1.7 ] [ 2.0 ] [ 2.1] [ 2.2 ] [ 2.3 ] [ 2.4 ] [ 2.5 ] [ 2.6 ] [ 2.7 ] [ 2.8 ] [ 2.9 ] [ 3.0 ] [ 3.1 ] [ 3.2 ] [ 3.3 ]

©2003 de Vries