Hilfe:Textgestaltung

Aus Narutopedia
Wechseln zu: Navigation, Suche
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