ZUM-Wiki:HTML-Kasten erzeugen

aus ZUM-Wiki, dem Wiki für Lehr- und Lerninhalte auf ZUM.de
Wechseln zu: Navigation, Suche

Inhaltsverzeichnis

Welche Art von Kästen gibt es?

Einfacher Kasten

Die einfachste Variante ist in der Wikimedia-Software eingebaut und entsteht durch ein Leerzeichen am Zeilenanfang.

Am Anfang dieser Zeile steht ein Leerzeichen und, wenn man zu viel in einer Zeile schreibt, kann es sein, dass der Text über den rechten Rand hinausgeschrieben wird und nicht mehr richtig lesbar ist.

Zwei Zeilen hintereinander, die mit einem Leerzeichen beginnen, werden in ein gemeinsames Kästchen ausgegeben.

Erste Zeile mit Leerzeichen
Zweite Zeile mit Leerzeichen

Eigenschaften:

  • Es wird eine andere Schrift verwendet, die eine feste Zeilenbreite hat. Dadurch kann man ggf. durch Leerzeichen eine Tabelle oder eine andere Formatierung erzeugen.
  • Wie im ersten Beispiel gezeigt wird, findet nicht automatisch ein Zeilenumbruch statt.

HTML-Kasten

Wesentlich besser und komfortabler sieht ein Kasten aus, der mit Hilfe von HTML-Befehlen erzeugt wird. Außerdem wird eine normale Schriftart verwendet und es findet ein Zeilenumbruch statt.

Hier ein HTML-Kasten.

Der Kasten wird durch die folgenden Befehle erzeugt:

<div style="margin:0; margin-right:10px; border:2px solid #dfdfdf; padding: 0em 1em 1em 1em; background-color:#ECFFE4;text-align:center">
Hier ein HTML-Kasten.
</div>

Eigentlich sind es nur zwei wesentliche Befehle:

  • In der ersten Zeile wird beschrieben, wie der Kasten aussehen soll.
  • In der zweiten Zeile steht der Text, der im Kasten stehen soll. Natürlich können es auch mehrere Zeilen sein.
  • Die dritte Zeile gibt an, wo das Kästchen zu Ende ist.

Falls man etwas am Aussehen des Kästchens ändern will, kann man den Befehl in der ersten Zeile abändern:

  • margin ... gibt in Pixeln (px) an, wie groß der Rand außen um das Kästchen herum ist. Diese Zahl gilt für alle vier Seiten.
  • margin-right ... gibt nur den Abstand rechts an.
  • border ... gibt an, wie dick die Randlinie sein soll.
  • solid ... erzeugt einen durchgezogenen Rand. Dagegen ergibt dashed eine gestrichelte Linie
  • #dfdfdf ... direkt dahinter gibt die Farbe des Randes an. Dieser Farbcode gibt Informationen über den Anteil von Rot, Gelb und Blau. Es gibt zahlreiche Grafik-Programme, die Ihnen zu Ihrer Lieblingsfarbe den Code angeben können. Alternativ lohnt sich ein Blick auf diese Seite mit Farbtabelle. Beim Zahlencode nicht das Doppelkreuz # vergessen!
  • padding ... beschreibt die Anstände des Texte vom inneren Rand des Kastens. Reihenfolge: Oben, Rechts, Unten, Links.
  • background-color ... gibt die Hintergrundfarbe an. Man verwendet den gleichen Farbcode wie für die Randfarbe.
  • text-align:left ... gibt an, dass der Inhalt des Kästchens links ausgerichtet wird. Andere Optionen: right und center.

Kästen als Textbausteine

Siehe Kästen für Meinung und Hinweise auf der Seite ZUM-Wiki:Textbausteine.

Siehe auch