Anleitung: Texte formatieren und gliedern leicht gemacht

[almafan]

Texte formatieren und gliedern leicht gemacht

Das Inhaltsverzeichnis ist verlinkt und bringt euch direkt zum Thema.

• Fett, kursiv und unterstrichen
• Zitate und Quellcode kenntlich machen
• Listen und Aufzählungen erstellen
• Links zu Internetadressen setzen
• Schriftgröße und -farbe ändern
• Texte ausrichten und durchstreichen

[almafan]

Fett, kursiv und unterstrichen

Die ersten drei Button über dem Textfeld dürften mittlerweile ja bekannt sein. Ich will es dennoch einmal schnell erläutern.

Wann immer ein Text fettgeschrieben werden soll, verwendet ihr den B-Tag (engl. bold). Für kursive Hervorhebungen wird der i-Tag (engl. italic) verwendet. Und für unterstrichende Texte nehmt ihr den u-Tag.

Code:

[b]Dieser Text ist fett geschrieben.[/b]

Dieser Text ist fett geschrieben.

Code:

[i]Dieser Text ist kursiv geschrieben.[/i]

Dieser Text ist kursiv geschrieben.

Code:

[u]Dieser Text ist unterstrichen.[/u]

Dieser Text ist unterstrichen.

Diese Tags können auch gemischt verwendet werden. Ein umständliches Beispiel:

Code:

[b][i][u]Dieser Text ist fett, kursiv und unterstrichen.[/u][/i][/b] Aber [b]nicht[/b] an [i]allen Stellen[/i]. [b][i][u]Mal ist er mit allem formatiert[/u][/i][/b], [u]mal nur mit einer[/u] [b][i]oder zwei Funktionen[/i][/b].

Dieser Text ist fett, kursiv und unterstrichen. Aber nicht an allen Stellen. Mal ist er mit allem formatiert, mal nur mit einer oder zwei Funktionen.

Vom Standartumfang der Funktionen dieses Forums werden aber noch mehr Sachen geboten.

[almafan]

Zitate und Quellcode kenntlich machen

So gibt es eine Funktion, um Zitate kenntlich zu machen.

Code:

[quote]Aller Anfang ist schwer.[/quote]

Aller Anfang ist schwer.

Die Funktion Code konntet ihr hier bereits zur Genüge beobachten. Sie sagt dem Board (dem Programm hinter dem Forum) das Text zwischen den Code-Tags nicht umgewandelt werden soll. Innerhalb eines Code-Tag funktionieren keine Formatierungen und Links.

Code:

[code]Aller Anfang ist schwer.[/code]

Das Ergebnis sieht dann so aus:

Code:

Aller Anfang ist schwer.

[almafan]

Listen und Aufzählungen erstellen

Dann gibt es da noch die Funktion der Liste und der geordneten Liste.

Code:

[list][*]Erstens
[*]Zweitens
[*]Drittens[/list]

• Erstens
• Zweitens
• Drittens

Code:

[list=1][*]Erstens
[*]Zweitens
[*]Drittens[/list]

1. Erstens
2. Zweitens
3. Drittens

Code:

[list=a][*]Erstens
[*]Zweitens
[*]Drittens[/list]

1. Erstens
2. Zweitens
3. Drittens

Code:

[list=A][*]Erstens
[*]Zweitens
[*]Drittens[/list]

1. Erstens
2. Zweitens
3. Drittens

Wird nur der List-Tag verwendet, so entsteht eine Liste deren Unterpunkte nur mit einem Punkt gekennzeichnet werden. Verwendet man dagegen den List=-Tag so muss man dort 1, a oder A anfügen. Dem entsprechend werden aus den Punkten der Liste dann Zählungen im jeweiligen System (also 1,2,3 ... , a,b,c ... oder A,B,C ...). Der *-Tag kennzeichnet dabei den einzelnen Unterpunkt. Das Sternchen hat keinen End-Tag (z.B. [/*]) Selbst wenn man zwei Stichpunkte, mit dem *-Tag getrennt, in eine Zeile schreibt, werden die Punkte untereinander aufgeführt. So geschehen bei allen angezeigten Listen. Im Code sind alle Listen schön untereinander geführt. Im List- und List=-Tag sind sie dagegen einfach in eine Zeile geschrieben. Das Sternchen steht also auch noch für den Zeilenumbruch innerhalb einer Liste.

[almafan]

Links zu Internetadressen setzen
Im Grunde ist das ähnlich simpel, wie z.B. die Fett- oder Kursivschrift. Die eingefügte Internetadresse in den URL-Tag legen und fertig.

Code:

[url]www.youtube.com[/url]

http://www.youtube.com
Internetadressen, also aktive Links, sind an der blauen Unterstreichung zu erkennen und daran, dass sich der Mauspfeil ändern, wenn man mit der Maus über den Link geht.

Es gibt aber auch eine zweite Variante zur Anwendung der URL.

Code:

[url=www.youtube.com]Die weltgrößte Videoplattform[/url]

Die weltgrößte Videoplattform
Im öffnenden URL-Tag wird ein = angehangen und die Web-Adresse gleich dahinter gesetzt. Erst dann wird der Tag geschlossen und ein Platzhalter eingefügt. Das kann auch ein Bild (Img-Tag) sein. Erst dahinter wird der Schluss-Tag "/URL" angewendet.

[almafan]

Schriftgröße und -farbe ändern
Eigentlich seht ihr die Änderung der Schriftgröße bereits im ganzen Text. Hinter den Kulissen sieht es wie folgt aus.

Code:

[size=150]Schriftgröße und -farbe ändern[/size]

Das Forum stellt euch 5 Voreinstellungen zur Verfügung. Man kann den Zahlenwert hinter "size=" aber auch von Hand ändern.

Klickt ihr auf "Schriftfarbe" so öffnet sich ein Feld mit 25*5 Farbkästchen. Damit sind 125 Farben simpel über die Maus zu wählen.

Code:

[color=#800000]Schriftgröße und -farbe ändern[/color]

Man kann natürlich auch in der sechsstelligen Zahl hinter der Raute selbst rumpfuschen. Die ersten 2 Ziffern stehen für den Rotanteil, die Ziffern 3 und 4 stehen für den Grünanteil und die letzten beiden Ziffern für den Blauanteil. Das System ähnelt also dem Fernsehbild. Aus der Mischung von Rot und Grün, unter weglassen des Blau, ergibt sich der Gelbton. Mit diesen 6 Ziffern lassen sich ingesamt 16.777.216 Farben mischen. Dabei kann jede Ziffer einen Wert zwischen 0 und F annehmen. Denn der Farbcode ergibt sich aus dem Hexadezimalystem. 0 bedeutet den niedrigsten Wert, also auch den geringsten Farbanteil. F dagegen ist der höchste Wert und damit auch der höchste Farbanteil. Jeder Farbanteil (Rot, Grün, Blau) kann also von 00 bis FF gehen, also 256 Zustände annehmen. Und da jede Kombination zwischen den 3 verschiedenen Farben mit ihren jeweils 256 Farbstärken möglich ist, ergibt sich diese hohe Anzahl möglicher Farben. Wem das zu kompliziert war, der möge sich hier melden und ich erläutere es nochmals.

[almafan]

Texte ausrichten und durchstreichen
Damit hätten wird die vom Forum gebotenen Textformatierungen abgehandelt. Euer werter Almafan war aber nicht untätig und hat vier weitere Funktionen geschrieben, die der Übersicht dienen sollen. Erst war ich etwas verwirrt, dass diese Formatierungen nicht bereits Standart sind. Sie sind in nahezu jedem Textprogramm zu finden. Zentriert, Rechtsbündig, Blockschrift und Durchstreichen.

Da jeder Text, vom Forum vorgegeben, bereits Linksbündig ist, ist eine solche Funktion sinnfrei. Ich habe also die anderen Textausrichtungen genommen. Vorweg: Sie können ebenso wild mit den Standartformatierungen, wie Fett, Kursiv, Unterstrichen und Quote gemischt werden, wie diese Funktionen untereinander. Sie sind also vollwertige Erweiterungen. Ihr fragt euch vielleicht, wo ihr sie findet. Sie haben die unscheinbaren Namen "tb", "tc", "td" und "tr".

Code:

[tc]Zentrierter Text steht, wie sollte es anders sein in der Mitte und dehnt sich folglich beim in beide Richtungen aus.[/tc]

Zentrierter Text steht, wie sollte es anders sein in der Mitte und dehnt sich folglich beim in beide Richtungen aus.

Code:

[tr]Rechtsbündiger Text steht rechts und je länger die Textzeile ist, desto mehr reicht er nach links.[/tr]

Rechtsbündiger Text steht rechts und je länger die Textzeile ist, desto mehr reicht er nach links.

Code:

[tb]Blockschrift teilt den Text gleichmäßig auf die Seitenbreite auf. So werden unterschiedliche Zeilenenden unterbunden und der Text hat immer einen akuraten linialgeraden Abschluss. Ausnahmen sind Texte die weniger als etwa 75%-80% der Seitenbreite einnehmen. Diese werden standartgemäß linksbündig angeordnet, da die einzelnen Worte sonst weit auseinander liegen und so den Lesefluss stören würden.[/tb]

Blockschrift teilt den Text gleichmäßig auf die Seitenbreite auf. So werden unterschiedliche Zeilenenden unterbunden und der Text hat immer einen akuraten linialgeraden Abschluss. Ausnahmen sind Texte die weniger als etwa 75%-80% der Seitenbreite einnehmen. Diese werden standartgemäß linksbündig angeordnet, da die einzelnen Worte sonst weit auseinander liegen und so den Lesefluss stören würden.

Code:

[td]Durchgestrichener Text kann zur transparenten Textkorrektur verwendet werden oder aber zur Satire verwendet werden.[/td] Siehe dazu: [url]http://www.bildblog.de/39597/giro-sucht-zero/[/url]

Durchgestrichener Text kann zur transparenten Textkorrektur verwendet werden oder aber zur Satire verwendet werden. Siehe dazu: http://www.bildblog.de/39597/giro-sucht-zero/

Eine neue Funktion seit 25. März 2020 ist das Einrücken einzelner Zeilen mit gewünschten Maß. Und das geht so:

Code:

[ti 50]Diesen Text will ich 50 Pixel einrücken.[/ti]
[ti 33]Diesen Text nur 33 Pixel.[/ti]
[ti 100]Aber diesen gleich 100 Pixel[/ti]

Das Ergebnis:

Diesen Text will ich 50 Pixel einrücken.

Diesen Text nur 33 Pixel.

Aber diesen gleich 100 Pixel

Wichtig ist, dass man hinter dem "ti"-Tag nicht vergisst, nach einem Leerzeichen die Anzahl der einzurückenden Pixel einzutragen. Soll ein Text in jedem Format, ob Handy, Tablet oder Laptop aber zentriert oder rechtsbündig sein, dann verwendet lieber die obigen Textausrichtungen.

[almafan]

Tabellen erstellen und formatieren

Seit heute gibt es auch Tabellen. Nur wenige werden Gebrauch davon machen, aber ich habe sie eingefügt.
Da aber aber eben selten genutzt werden wird, gehört es nicht zu den Button, die über dem Textfeld erscheinen. Den Quellcode müsst ihr von Hand schreiben.

Code:

[table][/table]

Mit diesem Code erstellt man eine Tabelle.

Damit dieser Code funktioniert, muss eine Zahl hinter das Tag [table] gesetzt werden. Diese Zahl gibt die Breite der Tabelle in Pixeln an.

Code:

[table 600][/table]

Diese Beispieltabelle hat demnach also eine Breite von 600 Pixeln. Das kann in der Regel auf Smartphonebildschirmen noch dargestelt werden. Jede Tabelle erstellt automatisch eine Zeile. Dass heißt, dass man für eine neue Zeile eine neue Tabelle erstellen muss. Die Anzahl der Spalten wiederum kann man selbst festlegen.

Code:

[col][/col]

Erstellt eine Spalte. Hinter dem Eingangs-Tag [col] muss noch eine Zahl angegeben werden. Diese Zahl steht für den Prozentsatz, den diese Spalte von der Gesamtbreite der Tabelle erhält.

Code:

[table 600][col 50][/col][col 25][/col][col 25][/col][/table]

Diese Beispieltabelle, mit einer Breite von 600 Pixeln, enthält also 3 Spalten, von denen die 1. 50% (also 300 Pixel) hat und die anderen beiden 25% (also 150 Pixel).

Aus dem Code

Code:

[table 600][col 50][b][u]Posten[/u][/b][/col][col 25][b][u]Januar[/u][/b][/col][col 25][b][u]Februar[/u][/b][/col][/table]
[table 600][col 50]Miete[/col][col 25]300 Euro[/col][col 25]300 Euro[/col][/table]
[table 600][col 50]Kleidung[/col][col 25]50 Euro[/col][col 25]275 Euro[/col][/table]

Wird so optisch:

Posten

Januar

Februar

Miete

300 Euro

300 Euro

Kleidung

50 Euro

275 Euro

Erweiterungen der Tags [table] und [col] sind in Arbeit und werden hier ergänzt.