Meinen Originalbeitrag in englischer Sprache findet ihr hier.
Hallo zusammen!
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. Wenn ihr wollt, könnt ihr diesen Beitrag einfach als ein Lesezeichen in eurem Browser speichern!
(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"/>
🡻
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>
🡻
- Eichenwalde
- Hanamura
- 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üder
Hanzo & 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! Ich freue mich auf Feedback. Solltet ihr Ergänzungen haben, zögert bitte nicht, damit ich diese auf der Stelle hinzufügen kann!
Pachimari