▶ Formatierungs-Tutorial fürs Forum → Links, Tabellen, Texte und mehr

[Affenkoenig-21932]

𝔉𝔬𝔯𝔪𝔞𝔱𝔦𝔢𝔯𝔲𝔫𝔤𝔰-𝔗𝔲𝔱𝔬𝔯𝔦𝔞𝔩 𝔣𝔲𝔢𝔯𝔰 𝔉𝔬𝔯𝔲𝔪 → 𝔏𝔦𝔫𝔨𝔰, 𝔗𝔞𝔟𝔢𝔩𝔩𝔢𝔫, 𝔗𝔢𝔵𝔱𝔢 𝔲𝔫𝔡 𝔪𝔢𝔥𝔯

Wie einige hier vielleicht schon mitbekommen haben, haben wir ein neues Forum

Das neue Forum funktioniert allerdings ganz anders als das alte Forum… hier werden verschiedene Formatierungen unterstützt: HTML, BBCode, Markdown, Unicode,…

Da ich selbst auch mal ganz gerne ein wenig HTML, etc schreibe (privat und weit entfernt von professionell), hat mich das Thema der Forums-Formatierung auch interessiert und ich dacht, ich schreib mal ein tuto, da es ja leider kein offizielles Tuto dazu anscheinend gibt.
OK, ich war schneller als er/sie , aber es gibt jetzt doch ein Tuto von nem MVP im Technischen Supportbereich

Es gibt zwar auch mehrere von Usern im US-Forum (bei denen ich auch zugegebener Maßen ein wenig was abgeschaut habe), aber es kann ja auch nicht jeder englisch.

Ich werde aber hauptsächlich auf HTML eingehen, da ich damit auch gerne mal was mache, vlt. noch etwas Markdown, da dieser schon Schreibarbeit erspart.

Um zu formatieren brauch man „tags“

Damit das Forum weiss, wie etwas formatiert werden soll, muss man es ihm sagen, dies macht man in der Regel mit sogenannten „tags“.

Wie sieht ein solch ein „tag“ aus?

nun bei Markdown ist das etwas anders, aber bei HTML und BBcode müssen die sogenannten „Tags“ immer geöffnet und geschlossen werden.
bei HTML geschieht das mit Hilfe eines < > und eines </ >
bei BBcode mit und eines [/ ]

Beispiel für „fettgedruckten“ text (bold text):
HTML: <b>Beispieltext</b> → Beispieltext
BBcode: [b]Beispieltext[/b] → Beispieltext
Markdown: **Beispieltext** → Beispieltext

Dabei sollte man achten, dass die jeweiligen Tags immer „umschließend“ geschrieben werden sollten.

Umschließend, häh?

Das < >-Tag wird vor dem Wort/Satz geöffnet und danach direkt mit </ > wieder geschlossen…
als Beispiel für einen fettgedruckten (<b>) und gleichzeitig kursiven (<i>) Text:
Es ist dabei egal in welcher Reihenfolge dies geschieht (also zuerst <b> und dann <i>, oder zuerst <i> und dann <b> ist egal)

Zuerst drucken wir den Text fett:

<b>Beispieltext</b> → Beispieltext

da herum kommt dann der Kursiv-tag

<i><b>Beispieltext</b></i> → Beispieltext

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

<b><i>Beispieltext</i></b> → richtig
<b><i>Beispieltext</b></i>→ falsch

soweit so gut, der Rest sollte da kein Problem mehr darstellen

Fangen wir mal an

---

Überschriften

Es gibt verschieden Arten von Überschriften

In HTML werden diese mit <h1>, <h2>, <h3>, etc. geschrieben
in Markdown brauch man dafür lediglich ein paar # and den Satzanfang zu stellen.

<h1>Beispielüberschrift</h1>

Beispielüberschrift

<h2>Beispielüberschrift</h2>

Beispielüberschrift

<h3>Beispielüberschrift</h3>

Beispielüberschrift

# Beispielüberschrift

Beispielüberschrift

## Beispielüberschrift

Beispielüberschrift

### Beispielüberschrift

Beispielüberschrift

alternative bei Markdown
Beispielüberschrift
===

Beispielüberschrift
---

---

Textformatierungen

Fraktur- oder Schreibschrift

Wie man vielleicht schon gesehen hat, kann man auch eine Fraktur- oder Schreibschrift hier darstellen.
Allerdings ist dies viel Arbeit … die einzelnen Buchstaben werden einfach aus Unicode zusammengestellt (am Ende dieses Tutos gibts ne Übersicht zu Unicode).
Wer (warum auch immer) einen größeren Text in besagter Schrift verfassen möchte, kann sich den Text ja mit dem Texteditor vorschreiben und mit „Suchen & Ersetzen“ arbeiten (ist aber immernoch verdammt viel Arbeit dann).

Ich hab mir für den Text oben einfach ne Tabellenkalkulation erstellt mit einer „=Wechseln(“-Funktion → dauerte keine 10min.
Wer möchte, kann sichs ja anschauen, erstellt wurde es mit LibreOffice Calc: Download → Virenscan bei VirusTotal

fettgedruckter Text

<b>Beispieltext</b> → Beispieltext
**Beispieltext** → Beispieltext
__Beispieltext__ → Beispieltext
STRG + B

kursiver Text

<i>Beispieltext</i> → Beispieltext
*Beispieltext* → Beispieltext
_Beispieltext_ → Beispieltext
STRG + I

durchgestrichener Text

<s>Beispieltext</s> → Beispieltext
~~Beispieltext+~ → Beispieltext

Abgekürzter Text (mit Mouseover ohne Abkürzung)

<abbr title="Hypertext Markup Language">HTML</abbr> → HTML

code Text, bzw. vorformatierter Text

<code>Beispieltext</code> → Beispieltext
`Beispieltext` → Beispieltext
STRG + SHIFT + C

größerer Text

<big>Beispieltext</big> → Beispieltext

kleinerer Text

<small>Beispieltext</small> → Beispieltext

hochgestellter Text

E = MC<sup>2</sup> → E = MC²

tiefgestellter Text

H<sub>2</sub>O → H₂O

eingefüger Text

Um z.B. nach einem Edit etwas hervorzuheben, was man geändert hat

<ins>Beispieltext</ins> → Beispieltext

gelöschter Text

um z.B: nach einem Edit etwas hervorzuheben, was sich geändert hat

<del>Beispieltext</del> → Beispieltext

---

Listen

es gibt ungeordete und geordnete listen in HTML – die einen (<ul>) werden mit einem Symbol davor versehen, die anderen (<ol>) mit einer Zahl.

Die Listen kann man auch unterstrukturiert anordnen (also Listen in Listen), hier ein Beispiel einer ungeordeten Liste mit Unterstruktur

<ul>
<li>Beispieltext 1
<ul>
<li>Unterpunkt 1</li>
<li>Unterpunkt 2</li>
</ul>
</li>
</ul>

• Beispieltext 1
  • Unterpunkt 1
  • Unterpunkt 2

oder in Markdown - einfach Leerzeichen vor den nächsten Punkt setzen

* Beispieltext 1
  * Unterpunkt 1
  * Unterpunkt 2

• Beispieltext 1
  • Unterpunkt 1
  • Unterpunkt 2

ungeordente Liste

<ul>
<li>Beispieltext 1</li>
<li>Beispieltext 2</li>
<li>Beispieltext 3</li>
</ul>

oder

* Beispieltext 1
* Beispieltext 2
* Beispieltext 3

ergibt

• Beispieltext 1
• Beispieltext 2
• Beispieltext 3

geordnete Liste

<ol>
<li>Beispieltext 1</li>
<li>Beispieltext 2</li>
<li>Beispieltext 3</li>
</ol>

oder in Markdown:
(hierbei ist egal welche Zahl vorne steht, der Text wird automatisch durchnummeriet)

1. Beispieltext 1
1. Beispieltext 2
1. Beispieltext 3

ergibt

1. Beispieltext 1
2. Beispieltext 2
3. Beispieltext 3

Man kann hier in HTML auch angeben, ab welchem Punkt man die Nummerierung starten möchte:

<ol start=1000>

<ol start=1000>
<li>Beispieltext 1</li>
<li>Beispieltext 2</li>
<li>Beispieltext 3</li>
</ol>

1000. Beispieltext 1
1001. Beispieltext 2
1002. Beispieltext 3

---

Tabellen

HTML

Tabellen sind etwas komplizierter/umständlicher, hierfür sollte man mehrere Tags kennen

<table> → damit das Forum weiss, hier startet eine Tabelle
<th> → ist praktisch die Überschrift der Zeilen
<tr> → gibt an, das hier eine Zeile startet
<td> → gibt an, das hier eine Zelle startet
Desto mehr <th> oder <td> sich in einer <tr> befinden, desto mehr spalten hat die Tabelle.

Beispiel einer Tabelle mit einer Überschriftszeile, 2 Zeilen und 3 Spalten

<table>
<tr>
<th> Spalte 1</th> <th>Spalte 2</th> <th> Spalte 3</th>
</tr>
<tr>
<td>Zelle 1</td><td>Zelle 2</td><td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 4</td><td>Zelle 5</td><td>Zelle 6</td>
</tr>
</table>

Spalte 1	Spalte 2	Spalte 3
Zelle 1	Zelle 2	Zelle 3
Zelle 4	Zelle 5	Zelle 6

Markdown:

hier ist es auch noch egal wieviele - man eingibt, oder ob Leerzeichen vor oder nach dem | sich befindet.

Das | ist übrigends das Zeichen, welches man mit ALT GR und der < Taste auf dem Keyboard einfügt (ganz unten links ).

| Spalte 1 | Spalte 2 | SPalte 3|
|---|---|---|
| Zelle 1 | Zelle 2 | Zelle 3|
| Zelle 4 | Zelle 5 | Zelle 6|

Spalte 1	Spalte 2	SPalte 3
Zelle 1	Zelle 2	Zelle 3
Zelle 4	Zelle 5	Zelle 6

hier kann auch noch die Textausrichtung geändert werden, dies geschieht mit
einem Doppelpunkt in der 2. Zeile

| Linksbündig | Zentrierter Text | Rechtsbündig |
|:---|:---:|---:|
| Zell 1| Zelle 2| Zelle 3|

Linksbündig	Zentrierter Text	Rechtsbündig
Zell 1	Zelle 2	Zelle 3

---

Sonstiges

Text wie eine Keyboardtaste aussehen lassen

<kbd>STRG</kbd> → STRG

^1234567890ß´__ ←
TabQWERTZUIOPÜ+
CAPSASDFGHJKLÖÄ#⏎
SHIFT<YXCVBNM,.-SHIFT
STRG❖ALT___ Space ___ALT GRFN▤STRG

Horizontale Trennlinie

<hr>

---

oder mit Markdown einfach ein --- in eine leere Zeile einfügen

Boxen

um eine Box darzustellen muss man einfach nur ein > vor die Zeile stellen

> Beispielbox

Beispielbox

Das geht auch mehrfach

>>>>>>>>> Beispielbox (mit tollem Effekt :joy:)

Beispielbox (mit tollem Effekt )

Zeilenumbruch

<br>

Aufklappbare Boxen (für Spoiler o.Ä.)

in HTML benötigt man dafür zwei Tags
<details>um zu sagen, das hier eine solche Box startet
<summary>um zu sagen, wie diese Box heissen soll
<details><summary>Aufklappbare Box</summary>Text</details>

Aufklappbare Box

Text

bei Markdown geht es mit nur einem Tag
[details="Aufklappbare Box"]
Text
[/details]

Aufklappbare Box

Text

Umfragen

Umfragen werden wie Links ans Trust-level gebunden, kann also nicht jeder machen und ich kann somit auch kein Beispiel aufzeigen.
Nachtrag: Auch mit Trust-Level 3 (das ist für „normale“ User das höchste) kann ich keine Umfragen erstellen, scheint also den Blauen vorbehalten zu sein.

[poll type="regular"]
* Option 1
* Option 2
* Option 3
[/poll]

---

Links, Bilder und Youtube

Links und Bilder kann man nicht von Anfang an posten, man muss einen gewissen Trust-level erreichen.
Wie man diesen genau erhöht ist aber recht unklar… rege Forenbeteiligung und positives Verhaten tragen auf jedenfall dazu bei.

Jeder, der noch nicht den passenden Trust-Level hat, kann aber trotzdem Links posten.
Man muss sie nur in einer CodeBox / vorformatierten Text (siehe weiter oben unter Textformatierungen) posten:

http://playoverwatch.de

Bilder

<img> ist unser Bild-Tag in HTML
dieser wird jedoch mit mehreren Atributen zusammengeschrieben, die man auch kenne sollte

src=""→ dieses Attribut gibt an, woher das Forum das Bild holen soll
alt="" → dieses Attribut gibt an, was als Text stehen soll, wenn das BIld, das geladen werden soll, nicht existiert, oder nicht erreichbar ist
height="" → dieses Attribut gibt an, in welcher Höhe das BIld angezeigt werden soll
width="" → diese Attribut gibt an, welche Breite das Bild haben soll

https://imgur.com/Pshsybk.png ist hier ein OverWatch-Logo das ich auf imgur hochgeladen habe.
Der Originallink von der offiziellen Seite wäre etwas zu lang gewesen, um hier Beispiele aufzuzeigen… die Übersicht ginge schnell verloren.
Es kann natürlich auch jedes andere Bild sein, es muss nur im Internet per Link aufrufbar sein.

<img src="https://imgur.com/Pshsybk.png">
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

→ hier ist das Bild in der Originalgröße,… wenn das Bild nicht existent wäre, würde garnichts da stehen
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
<img src="https://i.imgur.com/Pshsybk12345.png"> (existiert nicht)
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

<img src="https://imgur.com/Pshsybk.png" alt="logo">
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

→ hier ist das Bild in der Originalgröße,… wenn das Bild nicht existent wäre, würde anstatt des Bildes der Text „logo“ da stehen
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
<img src="https://i.imgur.com/Pshsybk12345.png" alt="logo"> (existiert nicht)
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

<img src="https://imgur.com/Pshsybk.png" alt="logo" height="100" width="100">
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

→ hier ist das Bild in der Größe 100x100px (Anmerkung: es ist immernoch das selbe Bild wie oben, es wird nur herunterskaliert),… wenn das Bild nicht existent wäre, würde anstatt des Bildes der Text „logo“ da stehen
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
<img src="https://imgur.com/Pshsybk.png" alt="logo" height="100" width="100"> (existiert nicht)
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

oder mit Markdown
![Overwatch logo](https://imgur.com/Pshsybk.png)
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

was in der eckigen Klammer steht ist hierbei egal, das ist praktisch der „alt“-Tag von HTML
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
![Overwatch logo](https://imgur.com/Pshsybk12345.png) (existiert nicht)
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

Das Forum erkennt aber auch, wenn man einfach nur nen Bildlink einfügt

Links

<a> ist unser linktag in HTML, dieser wird jedoch mit einem Attribut versehen (href="" ), damit das funktioniert.
Zwischen <a> und </a> schreibt man dann noch einen Text, der dann dort in anklickbarer Form, stehen soll.

<a href="http://playoverwatch.de"> Overwatch</a> → Overwatch

oder mit Markdown
[Overwatch](http://playoverwatch.de) → Overwatch

darüber hinaus, „versteht“ das Forum auch, wenn man einen Link postet und wandelt diesen automatisch in eine klickbare Version um
http://playoverwatch.de → http://playoverwatch.de

Links mit Bildern

man kann natürlich auch ein Bild so erstellen, das wenn man es anklickt, eine Website aufgerufen würde.
Man ersetzt einfach den Text, der bei einem Hyperlink (<a>) dort normal stehen würde, durch den Bilder-tag (<img>).

<a href="http://playoverwatch.de"><img src="https://imgur.com/Pshsybk.png" alt="logo"></a>



hier ist nun das Overwatchlogo und sobald man auf das Bild klickt, gelangt man auf playoverwatch.de

Youtube

Um Youtube-Videos zu posten, muss man einfach nur den Youtube-Link posten und das Forum erkennt es automatisch
https://www.youtube.com/watch?v=1RyHUS0ePFs
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

Overwatch Cinematic-Trailer (DE)

---

Eine kleine Auflistung von ein paar Symbolen/Sonderzeichen:

ALT-Codes

Was sind ALT-Codes?
Das ist eingentlich recht einfach zu beantworten: Es sind Codes die man mit Hilfe der ALT-Taste auf dem Keyboards einfügt, und man dann Symbole in den Text einfügen kann.
Bsp.: Man hält die ALT-Taste gedrückt, gibt dann auf dem Nummernblock z.B. 3 ein. lässt dann die ALT-Taste los und erhält ein Herz → ♥ → bei manchen dieser Codes macht das Forum dann sogar automatisch ein Emote daraus →

Nummer	Symbol
1	☺
2	☻
3	♥
4	♦
5	♣
6	♠
11
12
13	♪
14	♫
15	☼
16	►
17	◄
30	▲
31	▼
23	↨
24	↑
25	↓
26	→
27	←
29	↔ ↔
176	░
177	▒
178	▓
0216	Ø

Unicode

Auch Unicode funktioniert, einfach copy&paste der Symbole von z.B. folgendem Link:

Unicodeblock Verschiedene piktografische Symbole – Wikipedia

⌘❖ ✲ ⎈ ^ ⌃ ❖ ⎇ ⌥ ◆ ◇ ✦ ✧ ⇧ ⇪ 🄰 ⇪ ⇫ ⇬ ⇮ ⇯ ⇭ ↵ ⏎ ⌤ ⎆ ▤ ☰ 𝌆 ⎄ ↹ ⇄ ⇤ ⇥ ↤ ↦ ⎋ ⌫ ⟵ ⌦ ⎀ ⎚ ⌧ ⇤ ⇥ ⤒ ⤓ ⇱ ⇲ ⇞ ⇟ △ ▽ ▲ ▼ ⎗ ⎘ ↑ ↓ ← → ▲ ▼ ◁ ▷ △ ▽ ⇦ ⇨ ⇧ ⇩ ⎉ ⎊ ⎙ ⍰ 🛈 ☾ ⌂ ✄ ⎌ ↶ ↷ ⟲ ⟳ ↺ ↻ 🕨 🕩 🕪 🕱:dark_sunglasses:
𝄞 ♩ ♪ ♫ ♬ ♭ ♯ ♮
🗸🗹🗴🗵🗳🗪🗣🗚🗛🗑🖰🕏

Frakturschrift

𝔄 𝔅 ℭ 𝔇 𝔈 𝔉 𝔊 ℌ ℑ 𝔍 𝔎 𝔏 𝔐 𝔑 𝔒 𝔓 𝔔 ℜ 𝔖 𝔗 𝔘 𝔙 𝔚 𝔛 𝔜 ℨ
𝔞 𝔟 𝔠 𝔡 𝔢 𝔣 𝔤 𝔥 𝔦 𝔧 𝔨 𝔩 𝔪 𝔫 𝔬 𝔭 𝔮 𝔯 𝔰 𝔱 𝔲 𝔳 𝔴 𝔵 𝔶 𝔷
𝕬 𝕭 𝕮 𝕯 𝕰 𝕱 𝕲 𝕳 𝕴 𝕵 𝕶 𝕷 𝕸 𝕹 𝕺 𝕻 𝕼 𝕽 𝕾 𝕿 𝖀 𝖁 𝖂 𝖃 𝖄 𝖅
𝖆 𝖇 𝖈 𝖉 𝖊 𝖋 𝖌 𝖍 𝖎 𝖏 𝖐 𝖑 𝖒 𝖓 𝖔 𝖕 𝖖 𝖗 𝖘 𝖙 𝖚 𝖛 𝖜 𝖞 𝖟

Schreibschrift

𝒜 ℬ 𝒞 𝒟 ℰ ℱ 𝒢 ℋ ℐ 𝒥 𝒦 ℒ ℳ 𝒩 𝒪 𝒫 𝒬 ℛ 𝒮 𝒯 𝒰 𝒱 𝒲 𝒳 𝒴 𝒵
𝒶 𝒷 𝒸 𝒹 ℯ 𝒻 ℊ 𝒽 𝒾 𝒿 𝓀 𝓁 𝓂 𝓃 ℴ 𝓅 𝓆 𝓇 𝓈 𝓉 𝓊 𝓋 𝓌 𝓍 𝓎 𝓏

Einige der Unicode-Symbole werden im Forum auch als Emojis genutzt.

HTML-Sonderzeichen

Code	Zeichen
 	(erzwungenes Leerzeichen)
←	←
„	„
“	“
«	«
»	»
↑	↑
→	→
↓	↓
↔	↔
↵	↵
⇐	⇐
⇑	⇑
⇒	⇒
⇓	⇓
⇔	⇔
©	©
®	®
±	±
≠	≠
≈	≈
≅	≅
≤	≤
≥	≥
µ	µ
¶	¶
«	«
»	»
¼	¼
½	½
¾	¾
×	×
÷	÷
∞	∞
‰	‰
&Oshlash;	Ø
α	α
β	β
Δ	Δ
δ	δ
Ω	Ω
ω	ω

---

---

Hoffe, das wird dem ein oder anderen eine Hilfe sein und auf ein paar schöne und stilvolle Beitrage

---

[Pinkbeauty-2117]

oh,großes lob für die arbeit,ich brauche es zwar nicht,aber sehr schön

[LosShrimpos-2644]

Super Beitrag. Ich finde er wäre sogar ein sticky wert.
Wobei eher eher ins technische forum passen würde

---

Alles ist wie immer, nur viel schlimmer!

[thielow-2201]

machst du hier ein praktikum?

[Affenkoenig-21932]

nee, bin einfach nur bescheuert und hatte ein wenig langeweile…

[LosShrimpos-2644]

Herzlichen Glückwunsch zum anpinen

[Akariel-1557]

Sehr geil!

1.000 Dank!

[XShocker-2718]

Der Thread kann natürlich auch wieder angepinnt werden.

XShocker