Fürs Forum → Links, Tabellen, Texte und mehr Formatierungen-Tutorial

[Melcom]

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

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,…

Daher dachte ich, ich schreib mal ein tuto, da es ja leider kein offizielles deutsches Tuto dazu anscheinend gibt.

Ich werde aber hauptsächlich auf HTML eingehen, 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).

< 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 → H2_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 )

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.

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

[poll type=“regular”]

• Option 1
• Option 2
• Option 3[/poll]

Links und Bilder

Links und Bilder kann man nicht von Anfang an posten, man muss einen gewissen Trust-level erreichen.
Dieses erreicht man automatich, 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:

https://forums.funcom.com/

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/a/rCQlV9y ist hier ein Conan Exiels 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/a/rCQlV9y”> → hier würde das Bild erscheinen, in der vorliegenden Größe,… wenn das Bild nicht existent wäre, würde garnichts da stehen

< img src=“https://imgur.com/a/rCQlV9y” alt=“logo”> → hier würde das Bild erscheinen, in der vorliegenden Größe,… wenn das Bild nicht existent wäre, würde anstatt des Bildes der Text “logo” da stehen

< img src=“https://imgur.com/a/rCQlV9y” alt=“logo” height=“100” width=“100”> → hier würde das Bild erscheinen, in der Größe 100x100px,… wenn das Bild nicht existent wäre, würde anstatt des Bildes der Text “logo” da stehen

oder mit Markdown
[Conan Exiels logo](https://imgur.com/a/rCQlV9y)
Conan Exiels logo
was in der eckigen Klammer steht ist hierbei egal, das ist praktisch der “alt”-Tag bei HTML

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=“https://forums.funcom.com/”> Funcom Forum → Funcom Forum (dieses Wort würd nun als Link anklickbar sein und https://forums.funcom.com/ würde aufgerufen werden, wenn man es anklickt)

oder mit Markdown
[Funcom Forum](https://forums.funcom.com/)
Funcom Forum

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=“https://forums.funcom.com/”>< img src=“https://imgur.com/a/rCQlV9y” alt=“logo”>< /a>

nun würde dort das Conan Exiels Logo stehen und sobald man auf das Bild klickt, gelangt man auf https://forums.funcom.com/

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	▓

Unicode

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

https://de.wikipedia.org/wiki/Unicodeblock_Verschiedene_piktografische_Symbole

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

Frakturschrift

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

Schreibschrift

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

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

HTML-Sonderzeichen

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

^[top]