Zum Inhalt springen

Hilfe:Start/ Rahmen

Aus Wikibooks

Mit HTML-Code gibt es zahlreiche Möglichkeiten, einen längeren Text etwas „aufzupeppen“. Hier werden nur ein paar Beispiele vorgestellt.

Als Textabschnitt mit <div>

So wird es eingegeben:

<div style="width:70%; margin:auto; background-color:yellow; color:darkblue; border:3px dashed red; padding: 4px;" >
'''Hinweis:''' Dieser Text ist gerade in einem ersten Aufbau. Bei Interesse schreiben Sie 
Ihr Wissen gern ohne große Formatierungen hier hinein ...
</div>

So sieht es aus:

Hinweis: Dieser Text ist gerade in einem ersten Aufbau. Bei Interesse schreiben Sie Ihr Wissen gern ohne große Formatierungen hier hinein ...

In Form einer Wiki-Tabelle

So wird es eingegeben:

{| style="width:50%; color:darkblue; background-color:#f4f4ff; border: 3px solid #999; padding: 4px;" align="right"
|'''Hinweis:''' Dieser Text ist gerade in einem ersten Aufbau. Bei Interesse schreiben Sie 
Ihr Wissen gern ohne große Formatierungen hier hinein ...
|}
<div style="clear:both;"></div>

So sieht es aus:

Hinweis: Dieser Text ist gerade in einem ersten Aufbau. Bei Interesse schreiben Sie Ihr Wissen gern ohne große Formatierungen hier hinein ...

Ohne den nachfolgenden div-Abschnitt würde dieser anschließende Text nach oben rutschen und den Platz links vom Kasten ausfüllen.

Mit Hervorhebung für Zitate durch <blockquote>

So wird es eingegeben:

<blockquote width=80%; style="background:#f4f4ff; border: 2px solid #999; padding:0 1em 0 1em;">
Diesen Text können Sie gern verbessern! Der Text in dieser Box darf auch mehrere Zeilen lang sein!
</blockquote>

So sieht es aus:

Diesen Text können Sie gern verbessern! Der Text in dieser Box darf auch mehrere Zeilen lang sein!

Kurze Erläuterungen

  • Die Prozentangabe in width:70%; gibt die Breite vor, leider stimmt es nicht genau. Richtig ist daran nur: Kleinere Prozentangaben ergeben schmalere Kästchen.
  • #f4f4ff und #999 sind Farbcodierungen – siehe Hervorhebungen (HTML) und die dort genannten Links.
  • 2px 3px 4px ist jeweils die Linienbreite; px steht für "Pixel".
  • Mit border-style border kann man den Strichtyp festlegen: dashed, dotted, double, solid.
Besser mit Vorlagen

HTML-Code hat den Vorteil, dass das Aussehen einer Seite sehr detailliert gesteuert werden kann. Andererseits wird der Quellcode einer Seite durch den Mix aus Wiki-Quelltext und HTML-/CSS-Befehlen schnell unübersichtlich und verschreckt Wiki-Anfänger, sich an der weiteren Verbesserung einer Seite zu beteiligen. Hier kann eine Vorlage helfen, den Quellcode lesbarer zu gestalten.