HTML Forum-Spickzettel

:gb: Meinen Originalbeitrag in englischer Sprache findet ihr hier. :gb:

Hallo zusammen! :wave:

Wie ihr vielleicht schon wisst, könnt ihr in den neuen Foren HTML-Code in eure Beiträge einbauen. Mit diesem ‚Spickzettel‘ möchte ich euch all die verschiedenen Dinge zeigen, die ihr benutzen könnt, um eure Threads und Antworten nach Herzenslaune zu gestalten. :heartpulse: Wenn ihr wollt, könnt ihr diesen Beitrag einfach als ein Lesezeichen in eurem Browser speichern! :star:

(Hinweis: Eventuell seid ihr nicht dazu befugt, einige der folgenden Codes zu verwenden. Dies hängt von eurer Vertrauensstufe ab. Hier könnt ihr mehr über die neuen Veränderungen erfahren.)

Wählt eine Kategorie:


Textformatierung

Fettgedruckter Text b

<b>Brauche Heilung!</b> 🡺 Brauche Heilung!

Kursiver Text i

<i>Brauche Heilung!</i> 🡺 Brauche Heilung!

Durchgestrichener Text s

<s>Brauche Heilung!</s> 🡺 Brauche Heilung!

Abgekürzter Text abbr

Haltet den Cursor über den abgekürzten Text, um die ganze Nachricht zu sehen!

<abbr title="Doomfist">DF</abbr> 🡺 DF

Eingefügter Text ins

<ins>Brauche Heilung!</ins> 🡺 Brauche Heilung!

Entfernter Text del

<del>Brauche Heilung!</del> 🡺 Brauche Heilung!

Tastatur-Text kbd

Drücke <kbd>A</kbd>, um fortzufahren 🡺 Drücke A, um fortzufahren

Codierter Text code

<code>Brauche Heilung!</code> 🡺 Brauche Heilung!

Zitierter Text blockquote

<blockquote>Brauche Heilung!</blockquote> 🡻

Brauche Heilung!

Hochgestellter Text sup

Brauche <sup>Heilung!</sup> 🡺 Brauche Heilung!

Tiefgestellter Text sub

Brauche <sub>Heilung!</sub> 🡺 Brauche Heilung!



Schriftgrößen

Großer Text big

<big>Brauche Heilung!</big> 🡺 Brauche Heilung!

Kleiner Text small

<small>Brauche Heilung!</small> 🡺 Brauche Heilung!

Überschrift, Größe 1 h1

<h1>Brauche Heilung!</h1> 🡻

Brauche Heilung!

Überschrift, Größe 2 h2

<h2>Brauche Heilung!</h2> 🡻

Brauche Heilung!

Überschrift, Größe 3 h3

<h3>Brauche Heilung!</h3> 🡻

Brauche Heilung!

Überschrift, Größe 4 h4

<h4>Brauche Heilung!</h4> 🡻

Brauche Heilung!

Überschrift, Größe 5 h5

<h5>Brauche Heilung!</h5> 🡻

Brauche Heilung!

Überschrift, Größe 6 h6

<h6>Brauche Heilung!</h6> 🡻

Brauche Heilung!



Links & Bilder

Text mit Link a href

<a href="https://eu.forums.blizzard.com/de/overwatch/c/allgemeines">Allgemeines Forum</a> 🡺 Allgemeines Forum

Bilder

Fangt mit dem img-Tag an. Ihr könnt jetzt zusätzliche Attribute hinzufügen:

  • src ist die Internetquelle eures Bildes. Der Link sollte mit einem Format wie etwa .jpg, .jpeg, .png, .bmp oder .gif enden.
  • Sollte euer Bild offline oder nicht mehr erreichbar sein, wird der Text hinter dem alt-Attribut stattdessen angezeigt.
  • Mit dem width-Attribut ändert ihr die Breite (X-Achse) eures Bildes.
    Solltet ihr dies auslassen, verwendet das Bild dessen originale Skalierung.
  • Mit dem height-Attribut ändert ihr die Höhe (Y-Achse) eures Bildes.
    Solltet ihr dies auslassen, verwendet das Bild dessen originale Skalierung.

<img src="http://www.mmogames.com/wp-content/uploads/2017/04/potf-overwatch-uprising-game-mode-payload-560x315.png" alt="Eskortiert die Fracht!" width="400" height="230"/> 🡻

Eskortiert die Fracht!

Bild mit Link

Kombiniert ein Bild mit einem Link, um dieses Bild anklickbar zu machen!

<a href="https://playoverwatch.com/de-de/heroes/sombra"><img src="https://upload.wikimedia.org/wikipedia/en/thumb/e/ef/Sombra_Overwatch.png/220px-Sombra_Overwatch.png"/></a> 🡻



Videos

Videos

Videos von YouTube und Vimeo müssen nicht mithilfe von HTML-Code eingefügt werden. Nennt einfach den Link des Videos und es bettet sich ganz von selbst ein!

https://www.youtube.com/watch?v=to8yh83jlXg 🡻


https://vimeo.com/157114995 🡻


Tabellen & Listen

Tabellen

Zuallererst wird eine Tabelle mithilfe des table-Tags definiert.

  • Die erste Zeile eurer Tabelle, der Header, wird mit th eingefügt.
  • Jegliche Daten danach können mit td hinzugefügt werden.
  • Nutzt den tr-Tag, um mit der nächsten Zeile eurer Tabelle fortzufahren.
<table>
<th>Siegesrate (%)</th>
<th>Ana</th>
<th>Doomfist</th>
<th>Junkrat</th>
<th>Zarya</th>
<tr>
<td>PC</td>
<td>46,01</td>
<td>51,06</td>
<td>49,94</td>
<td>51,05</td>
<tr>
<td>PS4</td>
<td>42,63</td>
<td>49,17</td>
<td>50,21</td>
<td>50,77</td>
<tr>
<td>XB1</td>
<td>43,38</td>
<td>49,81</td>
<td>50,27</td>
<td>50,75</td>
</table> 🡻 
Siegesrate (%) Ana Doomfist Junkrat Zarya
PC 46,01 51,06 49,94 51,05
PS4 42,63 49,17 50,21 50,77
XB1 43,38 49,81 50,27 50,75

Ungeordnete Liste ul

Eine Liste ohne bestimmter Reihenfolge. Jeder Eintrag wird mit li hinzugefügt.

<ul>
<li>Eichenwalde</li>
<li>Hanamura</li>
<li>Junkertown</li>
</ul> 🡻

  • Eichenwalde
  • Hanamura
  • Junkertown

Geordnete Liste ol

Eine Liste mit bestimmter Reihenfolge. Jeder Eintrag wird mit li hinzugefügt.
Ihr könnt die Startnummer mithilfe des start-Attributs festlegen.
Solltet ihr dies nicht tun, fängt die Liste bei 1 an.

<ol start="25">
<li>Eichenwalde</li>
<li>Hanamura</li>
<li>Junkertown</li>
</ol> 🡻

  1. Eichenwalde
  2. Hanamura
  3. Junkertown


Sonstiges

Rahmen iframe

Obwohl in diesen Rahmen nichts eingefügt werden kann, möchte ich ihn trotzdem erwähnen. Mithilfe von width height könnt ihr die Dimensionen festlegen.

<iframe width="300" height="145"> 🡺

Lücke br

Für den Fall, dass ihr zwischen euren Abschnitten ein wenig Abstand lassen wollt.

Brauche Heilung!<br>Brauche Heilung! 🡻
Brauche Heilung!

Brauche Heilung!

Details details summary

Erstellt ein kleines Menü, welches für mehr Details geöffnet werden kann.

<details><summary>Shimada-Brüder</summary>Hanzo & Genji</details> 🡻

Shimada-BrüderHanzo & Genji

Horizontale Linie hr

<hr> 🡻


Beschreibungen dd

Bei Beschreibungen handelt es sich um normalen Text, der aber ein wenig weiter rechts platziert wird.

<dd>Brauche Heilung!</dd> 🡻

Brauche Heilung!

Kommentar < >

Kommentare sind nur in Zitaten sichtbar. Perfekt für Geheimbotschaften!

Nichts ungewöhnliches hier. <Überhaupt nichts.> 🡻
Nichts ungewöhnliches hier.



Danke fürs Lesen! :innocent: Ich freue mich auf Feedback. Solltet ihr Ergänzungen haben, zögert bitte nicht, damit ich diese auf der Stelle hinzufügen kann!


Pachimari
5 Likes

Pachimari:

Danke dafür, dass du dir die Mühe gemacht hast, damit wir alle abschauen können. Ich war mal so frei/frech, deinen Post im Willkommens-Sticky zu verlinken. ^^

Gruß
–––––––––
Feedback zu meinem Beitrag kann in dieser kurzen Umfrage angebracht werden.

:man_facepalming:
Hätt ich das gewusst, hätt ich mir das können gestern sparen xD
https://eu.forums.blizzard.com/de/overwatch/t/arrow-forward-formatierungs-tutorial-fuers-forum/1051/8

Aber deins ist schöner xD

Affenkoenig:

Dein Post nebenan wurde angepinnt. Es war nicht umsonst. Danke auch dir! ^^

Gruß
–––––––––
Feedback zu meinem Beitrag kann in dieser kurzen Umfrage angebracht werden.

Ich denke, wir ergänzen uns da ganz wunderbar. :wink: Du erläuterst alles ein wenig genauer, meins ist mehr ein Nachschlagewerk. Doppelt hält besser!


Pachimari
2 Likes

/push

Darf ruhig wieder angepinnt werden. :slightly_smiling_face:

XShocker

3 Likes

:smirk: Nimm lieber diesen Thread (als Spickzettel):

https://eu.forums.blizzard.com/de/overwatch/t/der-ultimative-forenguide-codes-vertrauensstufen-faq/9163

Da hat Pachimari das alles noch etwas ausführlicher aufgeführt… :slightly_smiling_face:

2 Likes