Hilfe:Textgestaltung: Unterschied zwischen den Versionen

Aus Narutopedia
Wechseln zu: Navigation, Suche
K ("Eigentlich", kürzt man mit " eigtl. " ab.)
 
(12 dazwischenliegende Versionen von 5 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
{{Hilfe_Navigation}}
+
{{Navigation Hilfe}}
 
'''HTML''' ''(Hypertext Markup Language; auch HTM: Hypertext Markup)'' ist die Standard-Sprache für eine einfache Webseite. Heutzutage genügt HTML weitaus nicht mehr, da man immer mehr auf dynamische Webanwendungen stosst, deren Zwecke HTML nicht erfüllen kann. In einem Wiki benötigt man jedoch lediglich die Syntax-Funktionen von HTML.
 
'''HTML''' ''(Hypertext Markup Language; auch HTM: Hypertext Markup)'' ist die Standard-Sprache für eine einfache Webseite. Heutzutage genügt HTML weitaus nicht mehr, da man immer mehr auf dynamische Webanwendungen stosst, deren Zwecke HTML nicht erfüllen kann. In einem Wiki benötigt man jedoch lediglich die Syntax-Funktionen von HTML.
 
== Wiki-Syntax oder HTML? ==
 
== Wiki-Syntax oder HTML? ==
Welchen Syntax man nun nehmen soll, ist etwas umstritten. Jeder hat seine Vor- und Nachteile, wobei der Wiki-Syntax speziell für das Wiki entwickelt wurde.
+
Im Wiki sollte man allgemein mit dem Wiki-Syntax arbeiten, da jener für das Wiki entwickelt wurde, und auch schneller und effektiver im Wiki läuft, als normales HTML. Für gewisse Arbeiten reicht der Wiki-Syntax allerdings nicht mehr aus, da er zwar ein grosses Spektrum an den benötigten Funktionen von HTML abdeckt, aber doch nicht ganz alle.
 
+
Einige Funktionen gibt es allerdings nicht im Wiki-Syntax, sondern nur in HTML.
+
  
 +
Das Punkte wie "Text unterstreichen" oder "Farbe ändern" nicht im Syntax enthalten sind, liegt wohl daran, dass man sie für einen standardmässigen Wikipedia-Artikel (wofür das Wiki-System entwickelt wurde), nicht benötigt.
 
<br style="clear: both;" />
 
<br style="clear: both;" />
==Textbearbeitung via HTML==
+
==Textbearbeitung via HTML & Wiki-Syntax==
 +
 
 +
{| class="prettytable" width="99%"
 +
! bgcolor="#f1f1f1" width="25%" | Code (HTML)
 +
! bgcolor="#f1f1f1" width="25%" | Code (Wiki-Syntax)
 +
! bgcolor="#f1f1f1" width="25%" | Ergebnis
 +
! bgcolor="#f1f1f1" width="50%" | Erklärung
 +
|-
 +
| <nowiki><span style="color: green;">TEXT</span></nowiki> || ''nicht enthalten'' || <span style="color: green;">TEXT</span> || Mit diesem Code kann man die '''Farbe ändern'''.<br />Man kann den Wert einerseits mit den <span class="plainlinks">[http://www.homepage-total.de/html/farbnamen.php englischen Wörtern] für die Farben benutzen (green, red, black, white etc.), aber auch mit den [[Hilfe:Tabellen#Farbcodes|Farbcodes]]
 +
|-
 +
| <nowiki><span style="font-size:17px">TEXT</span></nowiki> || ''nicht enthalten'' ||<span style="font-size:17px">TEXT</span> || Mit diesem Code kann man die '''Größe eines Textes ändern'''.<br />Man kann den Wert "px" auch durch andere Größen-Einheiten ändern (z.B.: em).<br />Mit dem Wiki-Syntax könnte man den gleichen Wert (17px) auch mit <nowiki><big>TEXT</big></nowiki> erstellen.
 +
|-
 +
| <nowiki><u>UNTERSTRICHENER TEXT</u></nowiki> || ''nicht enthalten'' || <u>UNTERSTRICHENER TEXT</u> || Mit diesem Code kann man einen '''unterstrichenen Text''' erstellen.<br />''Bedeutung: Das "u" bedeutet "underlined".''
 +
|-
 +
| <nowiki><s>DURCHGESTRICHENER TEXT</s></nowiki> || ''nicht enthalten'' ||<s>DURCHGESTRICHENER TEXT</s> || Mit diesem Code kann man einen '''durchgestrichenen Text''' erstellen.<br />''Bedeutung: Das "s" bedeutet "strike".''
 +
|-
 +
| <nowiki><b>FETTER TEXT</b></nowiki> || <nowiki>'''FETTER TEXT'''</nowiki> || <b>FETTER TEXT</b> || Mit diesem Code kann man einen '''fetten Text''' erstellen.<br />Man kann diesen Code auch mit dem Wiki-Syntax-Code erstellen (<nowiki>'''TEXT'''</nowiki>)<br />''Bedeutung: Das "b" bedeutet "bold".''
 +
|-
 +
| <nowiki><i>KURSIVER TEXT</i></nowiki> || <nowiki>''KURSIVER TEXT''</nowiki> ||<i>KURSIVER TEXT</i> || Mit diesem Code kann man einen '''kursiven Text''' erstellen.<br />Man kann diesen Code auch mit dem Wiki-Syntax-Code erstellen (<nowiki>''TEXT''</nowiki>)<br />''Bedeutung: Das "i" bedeutet "italic".''
 +
|-
 +
| <nowiki><font face="Times">TEXT</font></nowiki> || ''nicht enthalten'' || <font family="Times">TEXT</font> || Mit diesem Code kann man '''die Schriftart ändern'''.<br />Man sollte die Standard-Schriftarten nehmen, denn wenn ein Besucher nicht die angegebene Schriftart besitzt sieht er die Schrift mit der "normalen" Schriftart: Arial.<br />Man kann dies verhindern indem man nach einer Schriftart (hier: Times) ein Komma (,) setzt und danach eine Standard-Schrift schreibt. Das bedeutet, wenn der Besucher keine Schriftart "Times" (Eigtl. unmöglich, denn "Times" ist eine Standard-Schrift) hat, sieht er die Schrift, die danach kommt. Man kann dies so oft machen wie man will.<br />''Bedeutung: Standard-Schrift: Diese Schrift haben fast alle Computer.''
 +
|}
 +
 
 +
==Rahmen erstellen ==
 +
Einen Rahmen erstellt man allgemein (auch in der Wikipedia) mit dem div-Tag. Das sieht z.B. so aus:
 +
<pre>
 +
<div style="border: 1px solid red; padding: 10px;">Hier kommt der Text rein.</div>
 +
</pre>
 +
 
 +
Dieser Code erzeugt eine ein Pixel dicke Box, wobei der Text rund 10 Pixel abstand zum Rand hat (padding).
 +
<div style="border: 1px solid red; padding: 10px;">Hier kommt der Text rein.</div>
 +
 
 +
=== Rahmen mit dem Wiki-Syntax ===
  
 
{| class="prettytable" width="99%"
 
{| class="prettytable" width="99%"
Zeile 14: Zeile 45:
 
! bgcolor="#f1f1f1" width="50%" | Erklärung
 
! bgcolor="#f1f1f1" width="50%" | Erklärung
 
|-
 
|-
| <nowiki><span style="color: green;">TEXT</span></nowiki> || <span style="color: green;">TEXT</span> || Mit diesem Code kann man die '''Farbe ändern'''.<br />Man kann den Wert einerseits mit den <span class="plainlinks">[http://www.homepage-total.de/html/farbnamen.php englischen Wörtern] für die Farben benutzen (green, red, black, white etc.), aber auch mit den [[Hilfe:Tabellen#Farbcodes|Farbcodes]]
+
|<code><nowiki>{|</nowiki></code><br /><code><nowiki>|-</nowiki></code><code><br /><nowiki>|style="border: 1px solid #000;"|</nowiki></code><br /><code><nowiki>|-</nowiki></code><br /><code><nowiki>|}</nowiki></code>
 +
|
 +
{|
 
|-
 
|-
| <nowiki><span style="font-size:17px">TEXT</span></nowiki> || <span style="font-size:17px">TEXT</span> || Mit diesem Code kann man die '''Größe eines Textes ändern'''.<br />Man kann den Wert "px" auch durch andere Größen-Einheiten ändern (z.B.: em).<br />Mit dem Wiki-Syntax könnte man den gleichen Wert (17px) auch mit <nowiki><big>TEXT</big></nowiki> erstellen.
+
|style="border: 1px solid #000;"|Text hier
 
|-
 
|-
| <nowiki><u>UNTERSTRICHENER TEXT</u></nowiki> || <u>UNTERSTRICHENER TEXT</u> || Mit diesem Code kann man einen '''unterstrichenen Text''' erstellen.<br />''Bedeutung: Das "u" bedeutet "underlined".''
+
|}
 +
|Dieser Rahmen ist ein 1px groß ("1px"), '''stabil''' ''(durchgehend)'' ("solid") und mit einer schwarzen Farbe (#000).
 
|-
 
|-
| <nowiki><s>DURCHGESTRICHENER TEXT</s></nowiki> || <s>DURCHGESTRICHENER TEXT</s> || Mit diesem Code kann man einen '''durchgestrichenen Text''' erstellen.<br />''Bedeutung: Das "u" bedeutet "strike".''
+
|<code><nowiki>{|</nowiki></code><br /><code><nowiki>|-</nowiki></code><code><br /><nowiki>|style="border: 1px dotted #000;"|</nowiki></code><br /><code><nowiki>|-</nowiki></code><br /><code><nowiki>|}</nowiki></code>
 +
|
 +
{|
 
|-
 
|-
| <nowiki><b>FETTER TEXT</b></nowiki> || <b>FETTER TEXT</b> || Mit diesem Code kann man einen '''fetten Text''' erstellen.<br />Man kann diesen Code auch mit dem Wiki-Syntax-Code erstellen (<nowiki>'''TEXT'''</nowiki>)<br />''Bedeutung: Das "b" bedeutet "bold".''
+
|style="border: 1px dotted #000;"|Text hier
 
|-
 
|-
| <nowiki><i>KURSIVER TEXT</i></nowiki> || <i>KURSIVER TEXT</i> || Mit diesem Code kann man einen '''kursiven Text''' erstellen.<br />Man kann diesen Code auch mit dem Wiki-Syntax-Code erstellen (<nowiki>''TEXT''</nowiki>)<br />''Bedeutung: Das "i" bedeutet "italic".''
+
|}
 +
|Dieser Rahmen ist ein 1px groß ("1px"), '''gepunktet''' ("dotted") und mit einer schwarzen Farbe (#000).
 +
|-
 +
|<code><nowiki>{|</nowiki></code><br /><code><nowiki>|-</nowiki></code><code><br /><nowiki>|style="border: 1px dashed #000;"|</nowiki></code><br /><code><nowiki>|-</nowiki></code><br /><code><nowiki>|}</nowiki></code>
 +
|
 +
{|
 +
|-
 +
|style="border: 1px dashed #000;"|Text hier
 +
|-
 +
|}
 +
|Dieser Rahmen ist ein 1px groß ("1px"), '''gestichelt''' ("dashed") und mit einer schwarzen Farbe (#000).
 +
|-
 +
|<code><nowiki>{|</nowiki></code><br /><code><nowiki>|-</nowiki></code><code><br /><nowiki>|style="border: 1px inset #000;"|</nowiki></code><br /><code><nowiki>|-</nowiki></code><br /><code><nowiki>|}</nowiki></code>
 +
|
 +
{|
 +
|-
 +
|style="border: 1px inset #000;"|Text hier
 +
|-
 +
|}
 +
|Dieser Rahmen ist ein 1px groß ("1px"), '''eingedrückt''' ("inset") und mit einer schwarzen Farbe (#000).
 +
|-
 +
|<code><nowiki>{|</nowiki></code><br /><code><nowiki>|-</nowiki></code><code><br /><nowiki>|style="border: 1px outset #000;"|</nowiki></code><br /><code><nowiki>|-</nowiki></code><br /><code><nowiki>|}</nowiki></code>
 +
|
 +
{|
 +
|-
 +
|style="border: 1px outset #000;"|Text hier
 +
|-
 +
|}
 +
|Dieser Rahmen ist ein 1px groß ("1px"), '''rausgedrückt''' ("outset") und mit einer schwarzen Farbe (#000).
 
|-
 
|-
| <nowiki><span style="font-famaly:Times">TEXT</span></nowiki> || <span style="font-famaly:Times">TEXT</span> || Mit diesem Code kann man '''die Schriftart ändern'''.<br />Man sollte die Standard-Schriftarten nehmen, denn wenn ein Besucher nicht die angegebene Schriftart besitzt sieht er die Schrift mit der "normalen" Schriftart: Arial.<br />Man kann dies verhindern indem man nach einer Schriftart (hier: Times) ein Komma (,) setzt und danach eine Standard-Schrift schreibt. Das bedeutet, wenn der Besucher keine Schriftart "Times" (Eigtl. unmöglich, denn "Times" ist eine Standard-Schrift) hat, sieht er die Schrift, die danach kommt. Man kann dies so oft machen wie man will.<br />''Bedeutung: Standard-Schrift: Diese Schrift haben fast alle Computer.''
 
 
|}
 
|}
 +
=== Rahmen mit HTML ===
 +
Die folgenden Rahmen kann man alle ebenfalls im div-Tag verwenden. Sie werden hier im span-tag dargestellt, da der div-Tag den Rahmen einer Tabelle sprengen würde (ein div-Tag ist automatisch auf 100% Breite. Man kann die Grösse zwar einstellen, doch würde das so recht kompliziert werden).
  
==Rahmen erstellen via HTML==
 
 
{| class="prettytable" width="99%"
 
{| class="prettytable" width="99%"
 
! bgcolor="#f1f1f1" width="25%" | Code
 
! bgcolor="#f1f1f1" width="25%" | Code
Zeile 35: Zeile 99:
 
! bgcolor="#f1f1f1" width="50%" | Erklärung
 
! bgcolor="#f1f1f1" width="50%" | Erklärung
 
|-
 
|-
| <nowiki><span style="border: 1px solid #000;">TEXT</span></nowiki> || <span style="border: 1px solid #000;">TEXT</span> || Dieser Rahmen ist ein 1px groß ("1px"), '''normal''' ("solid") und mit einer schwarzen Farbe (#000).
+
| <nowiki><span style="border: 1px solid #000;">TEXT</span></nowiki> || <span style="border: 1px solid #000;">TEXT</span> || Dieser Rahmen ist ein 1px groß ("1px"), '''stabil''' ''(durchgehend)'' ("solid") und mit einer schwarzen Farbe (#000).
 
|-
 
|-
 
| <nowiki><span style="border: 1px dotted #000;">TEXT</span></nowiki> || <span style="border: 1px dotted #000;">TEXT</span> || Dieser Rahmen ist ein 1px groß ("1px"), '''gepunktet''' ("dotted") und mit einer schwarzen Farbe (#000).
 
| <nowiki><span style="border: 1px dotted #000;">TEXT</span></nowiki> || <span style="border: 1px dotted #000;">TEXT</span> || Dieser Rahmen ist ein 1px groß ("1px"), '''gepunktet''' ("dotted") und mit einer schwarzen Farbe (#000).
Zeile 48: Zeile 112:
 
|-
 
|-
 
| <nowiki><span style="border: 1px solid #000; margin: 10px;">TEXT</span></nowiki> || <span style="border: 1px solid #000; margin: 10px;">TEXT</span> || Dieser Rahmen ist ein 1px groß ("1px"), normal ("solid") und mit einer schwarzen Farbe (#000). Außerdem hat er 10px '''Abstand''' ("margin") '''zum Außenstehenden'''.
 
| <nowiki><span style="border: 1px solid #000; margin: 10px;">TEXT</span></nowiki> || <span style="border: 1px solid #000; margin: 10px;">TEXT</span> || Dieser Rahmen ist ein 1px groß ("1px"), normal ("solid") und mit einer schwarzen Farbe (#000). Außerdem hat er 10px '''Abstand''' ("margin") '''zum Außenstehenden'''.
 +
|-
 +
| <nowiki><div style="border: 1px dashed #136db9; background-color: #fafafa; padding: 8px; font-family: Courier New;"></nowiki>TEXT<nowiki></div></nowiki>
 +
|<div style="border: 1px dashed #136db9; background-color: #fafafa; padding: 8px; font-family: Courier New;">TEXT</div>
 +
| Dieser Rahmen ähnelt dem dashed-border, hebt aber den einbezogenen Text besonders hervor. Der Code erfüllt dieselbe Funktion wie <nowiki><pre>TEXT</pre></nowiki>.
 
|}
 
|}
  
==Listen via HTML==
+
==Listen erstellen==
 +
Im Wiki sollte man <u>ausschliesslich</u> Listen mit dem Wiki-Syntax verwenden. Es sei denn, dies geht (aus welchen Gründen auch immer) nicht.
 +
 
 +
=== Listen mit dem Wiki-Syntax ===
 
{| class="prettytable" width="99%"
 
{| class="prettytable" width="99%"
 
! bgcolor="#f1f1f1" width="25%" | Code
 
! bgcolor="#f1f1f1" width="25%" | Code
Zeile 56: Zeile 127:
 
! bgcolor="#f1f1f1" width="50%" | Erklärung
 
! bgcolor="#f1f1f1" width="50%" | Erklärung
 
|-
 
|-
| <nowiki><ol><li>TEXT</li><li>TEXT</li></ol></nowiki> || <ol><li>TEXT</li><li>TEXT</li></ol> || '''Geordnete''' Liste
+
| <code><nowiki># Hier steht Text</nowiki></code><br /><code><nowiki># Hier steht Text</nowiki></code><br /><code><nowiki># Hier steht Text</nowiki></code><br /><code><nowiki># Hier steht Text</nowiki></code><br />
 +
|
 +
# Hier steht Text
 +
# Hier steht Text
 +
# Hier steht Text
 +
# Hier steht Text
 +
|numerierte Liste
 
|-
 
|-
| <nowiki><ul><li>TEXT</li><li>TEXT</li></ul></nowiki> || <ul><li>TEXT</li><li>TEXT</li></ul> || '''Ungeordnete''' Liste
+
| <code><nowiki>* Hier steht Text</nowiki></code><br /><code><nowiki>* Hier steht Text</nowiki></code><br /><code><nowiki>* Hier steht Text</nowiki></code><br /><code><nowiki>* Hier steht Text</nowiki></code><br />  
 +
|
 +
* Hier steht Text
 +
* Hier steht Text
 +
* Hier steht Text
 +
* Hier steht Text
 +
|normale  Liste
 
|}
 
|}
  
  
==Andere Funktionen via HTML==
+
=== Listen mit HTML ===
 
{| class="prettytable" width="99%"
 
{| class="prettytable" width="99%"
 
! bgcolor="#f1f1f1" width="25%" | Code
 
! bgcolor="#f1f1f1" width="25%" | Code
Zeile 68: Zeile 151:
 
! bgcolor="#f1f1f1" width="50%" | Erklärung
 
! bgcolor="#f1f1f1" width="50%" | Erklärung
 
|-
 
|-
| <nowiki><br /></nowiki>
+
| <nowiki><ol><li>TEXT</li><li>TEXT</li></ol></nowiki> || <ol><li>TEXT</li><li>TEXT</li></ol> || nummerierte  Liste
| <br />
+
|-
| '''Zeilenumbruch'''<br />''Nicht <nowiki><br></nowiki> schreiben, das ist falsch!''
+
| <nowiki><ul><li>TEXT</li><li>TEXT</li></ul></nowiki> || <ul><li>TEXT</li><li>TEXT</li></ul> || normale Liste
 
|}
 
|}

Aktuelle Version vom 3. Mai 2011, 10:24 Uhr

Navigation



HTML (Hypertext Markup Language; auch HTM: Hypertext Markup) ist die Standard-Sprache für eine einfache Webseite. Heutzutage genügt HTML weitaus nicht mehr, da man immer mehr auf dynamische Webanwendungen stosst, deren Zwecke HTML nicht erfüllen kann. In einem Wiki benötigt man jedoch lediglich die Syntax-Funktionen von HTML.

Wiki-Syntax oder HTML?

Im Wiki sollte man allgemein mit dem Wiki-Syntax arbeiten, da jener für das Wiki entwickelt wurde, und auch schneller und effektiver im Wiki läuft, als normales HTML. Für gewisse Arbeiten reicht der Wiki-Syntax allerdings nicht mehr aus, da er zwar ein grosses Spektrum an den benötigten Funktionen von HTML abdeckt, aber doch nicht ganz alle.

Das Punkte wie "Text unterstreichen" oder "Farbe ändern" nicht im Syntax enthalten sind, liegt wohl daran, dass man sie für einen standardmässigen Wikipedia-Artikel (wofür das Wiki-System entwickelt wurde), nicht benötigt.

Textbearbeitung via HTML & Wiki-Syntax

Code (HTML) Code (Wiki-Syntax) Ergebnis Erklärung
<span style="color: green;">TEXT</span> nicht enthalten TEXT Mit diesem Code kann man die Farbe ändern.
Man kann den Wert einerseits mit den englischen Wörtern für die Farben benutzen (green, red, black, white etc.), aber auch mit den Farbcodes
<span style="font-size:17px">TEXT</span> nicht enthalten TEXT Mit diesem Code kann man die Größe eines Textes ändern.
Man kann den Wert "px" auch durch andere Größen-Einheiten ändern (z.B.: em).
Mit dem Wiki-Syntax könnte man den gleichen Wert (17px) auch mit <big>TEXT</big> erstellen.
<u>UNTERSTRICHENER TEXT</u> nicht enthalten UNTERSTRICHENER TEXT Mit diesem Code kann man einen unterstrichenen Text erstellen.
Bedeutung: Das "u" bedeutet "underlined".
<s>DURCHGESTRICHENER TEXT</s> nicht enthalten DURCHGESTRICHENER TEXT Mit diesem Code kann man einen durchgestrichenen Text erstellen.
Bedeutung: Das "s" bedeutet "strike".
<b>FETTER TEXT</b> '''FETTER TEXT''' FETTER TEXT Mit diesem Code kann man einen fetten Text erstellen.
Man kann diesen Code auch mit dem Wiki-Syntax-Code erstellen ('''TEXT''')
Bedeutung: Das "b" bedeutet "bold".
<i>KURSIVER TEXT</i> ''KURSIVER TEXT'' KURSIVER TEXT Mit diesem Code kann man einen kursiven Text erstellen.
Man kann diesen Code auch mit dem Wiki-Syntax-Code erstellen (''TEXT'')
Bedeutung: Das "i" bedeutet "italic".
<font face="Times">TEXT</font> nicht enthalten TEXT Mit diesem Code kann man die Schriftart ändern.
Man sollte die Standard-Schriftarten nehmen, denn wenn ein Besucher nicht die angegebene Schriftart besitzt sieht er die Schrift mit der "normalen" Schriftart: Arial.
Man kann dies verhindern indem man nach einer Schriftart (hier: Times) ein Komma (,) setzt und danach eine Standard-Schrift schreibt. Das bedeutet, wenn der Besucher keine Schriftart "Times" (Eigtl. unmöglich, denn "Times" ist eine Standard-Schrift) hat, sieht er die Schrift, die danach kommt. Man kann dies so oft machen wie man will.
Bedeutung: Standard-Schrift: Diese Schrift haben fast alle Computer.

Rahmen erstellen

Einen Rahmen erstellt man allgemein (auch in der Wikipedia) mit dem div-Tag. Das sieht z.B. so aus:

<div style="border: 1px solid red; padding: 10px;">Hier kommt der Text rein.</div>

Dieser Code erzeugt eine ein Pixel dicke Box, wobei der Text rund 10 Pixel abstand zum Rand hat (padding).

Hier kommt der Text rein.

Rahmen mit dem Wiki-Syntax

Code Ergebnis Erklärung
{|
|-
|style="border: 1px solid #000;"|

|-
|}
Text hier
Dieser Rahmen ist ein 1px groß ("1px"), stabil (durchgehend) ("solid") und mit einer schwarzen Farbe (#000).
{|
|-
|style="border: 1px dotted #000;"|

|-
|}
Text hier
Dieser Rahmen ist ein 1px groß ("1px"), gepunktet ("dotted") und mit einer schwarzen Farbe (#000).
{|
|-
|style="border: 1px dashed #000;"|

|-
|}
Text hier
Dieser Rahmen ist ein 1px groß ("1px"), gestichelt ("dashed") und mit einer schwarzen Farbe (#000).
{|
|-
|style="border: 1px inset #000;"|

|-
|}
Text hier
Dieser Rahmen ist ein 1px groß ("1px"), eingedrückt ("inset") und mit einer schwarzen Farbe (#000).
{|
|-
|style="border: 1px outset #000;"|

|-
|}
Text hier
Dieser Rahmen ist ein 1px groß ("1px"), rausgedrückt ("outset") und mit einer schwarzen Farbe (#000).

Rahmen mit HTML

Die folgenden Rahmen kann man alle ebenfalls im div-Tag verwenden. Sie werden hier im span-tag dargestellt, da der div-Tag den Rahmen einer Tabelle sprengen würde (ein div-Tag ist automatisch auf 100% Breite. Man kann die Grösse zwar einstellen, doch würde das so recht kompliziert werden).

Code Ergebnis Erklärung
<span style="border: 1px solid #000;">TEXT</span> TEXT Dieser Rahmen ist ein 1px groß ("1px"), stabil (durchgehend) ("solid") und mit einer schwarzen Farbe (#000).
<span style="border: 1px dotted #000;">TEXT</span> TEXT Dieser Rahmen ist ein 1px groß ("1px"), gepunktet ("dotted") und mit einer schwarzen Farbe (#000).
<span style="border: 1px dashed #000;">TEXT</span> TEXT Dieser Rahmen ist ein 1px groß ("1px"), gestrichelt ("dashed") und mit einer schwarzen Farbe (#000).
<span style="border: 1px inset #000;">TEXT</span> TEXT Dieser Rahmen ist ein 1px groß ("1px"), eingedrückt ("inset") und mit einer schwarzen Farbe (#000).
<span style="border: 1px outset #000;">TEXT</span> TEXT Dieser Rahmen ist ein 1px groß ("1px"), rausgedrückt ("outset") und mit einer schwarzen Farbe (#000).
<span style="border: 1px solid #000; padding: 10px;">TEXT</span> TEXT Dieser Rahmen ist ein 1px groß ("1px"), normal ("solid") und mit einer schwarzen Farbe (#000). Außerdem hat er 10px Abstand ("padding") zum Inhalt.
<span style="border: 1px solid #000; margin: 10px;">TEXT</span> TEXT Dieser Rahmen ist ein 1px groß ("1px"), normal ("solid") und mit einer schwarzen Farbe (#000). Außerdem hat er 10px Abstand ("margin") zum Außenstehenden.
<div style="border: 1px dashed #136db9; background-color: #fafafa; padding: 8px; font-family: Courier New;">TEXT</div>
TEXT
Dieser Rahmen ähnelt dem dashed-border, hebt aber den einbezogenen Text besonders hervor. Der Code erfüllt dieselbe Funktion wie <pre>TEXT</pre>.

Listen erstellen

Im Wiki sollte man ausschliesslich Listen mit dem Wiki-Syntax verwenden. Es sei denn, dies geht (aus welchen Gründen auch immer) nicht.

Listen mit dem Wiki-Syntax

Code Ergebnis Erklärung
# Hier steht Text
# Hier steht Text
# Hier steht Text
# Hier steht Text
  1. Hier steht Text
  2. Hier steht Text
  3. Hier steht Text
  4. Hier steht Text
numerierte Liste
* Hier steht Text
* Hier steht Text
* Hier steht Text
* Hier steht Text
  • Hier steht Text
  • Hier steht Text
  • Hier steht Text
  • Hier steht Text
normale Liste


Listen mit HTML

Code Ergebnis Erklärung
<ol><li>TEXT</li><li>TEXT</li></ol>
  1. TEXT
  2. TEXT
nummerierte Liste
<ul><li>TEXT</li><li>TEXT</li></ul>
  • TEXT
  • TEXT
normale Liste