Der ultimative HTML-Guide für unser Forum

Warum den normalen Editor nutzen, wenn man mit HTML die volle Kontrolle über das Design hat?
Hier ist die komplette Anleitung – Schritt für Schritt und Befehl für Befehl erklärt!

(Ich habe so etwas vorher noch nie erklärt, aber ich versuche es jetzt einfach mal für euch. Hoffentlich hilft es dem einen oder anderen!)

1. Grundlegende Textformatierung

Mit diesen Tags könnt ihr einzelne Wörter oder Sätze hervorheben.

🔹 Fett (Bold)

Macht den Text dicker. Ideal für wichtige Schlagwörter.

<b>Wichtiger Text</b>

Ergebnis: Wichtiger Text

🔹 Kursiv (Italic)

Stellt den Text schräg. Gut für Eigennamen oder Betonungen.

<i>Betonter Text</i>

Ergebnis: Betonter Text

🔹 Unterstrichen

Zieht eine Linie unter den Text.

<u>Unterstrichener Text</u>

Ergebnis: Unterstrichener Text

🔹 Durchgestrichen

Zieht eine Linie durch den Text. Nützlich, um veraltete Infos zu markieren.

<s>Alter Text</s>

Ergebnis: Alter Text

🔹 Tiefgestellt & Hochgestellt

Wird oft für Formeln (wie H₂O) oder Quadratmeter (m²) verwendet.

H<sub>2</sub>O und x<sup>2</sup>

Ergebnis: H₂O und x²

2. Überschriften strukturieren

Überschriften geben dem Text eine Struktur. Die Zahl gibt die Wichtigkeit an (1 = am größten).

🔹 Hauptüberschrift (H1)

<h1>Das ist die größte Überschrift</h1>

Ergebnis:

Das ist die größte Überschrift

🔹 Unterüberschrift (H2 & H3)

<h2>Zweite Ebene</h2>
<h3>Dritte Ebene</h3>

Ergebnis:

Zweite Ebene

Dritte Ebene

3. Farben und Ausrichtung (Inline-CSS)

Hier nutzen wir das style-Attribut, um das Design direkt anzupassen. Auch hier gilt: Bei Blockelementen (wie Überschriften) filtert das Forum Farben oft heraus, nutzt dafür dann einfach das <span>-Element.

🔹 Textfarbe ändern

Ihr könnt englische Farbnamen (red, blue) oder Hex-Codes (#FF0000) verwenden.

<span style="color: red;">Achtung, roter Text!</span>

Ergebnis: Achtung, roter Text!

🔹 Text zentrieren

Richtet den Absatz mittig aus.

<p style="text-align: center;">Dieser Text steht in der Mitte.</p>

Ergebnis: Dieser Text steht in der Mitte.

🔹 Text rechtsbündig ausrichten

Verschiebt den Text an den rechten Rand.

<p style="text-align: right;">Dieser Text steht rechts.</p>

Ergebnis: Dieser Text steht rechts.

4. Listen erstellen

🔹 Ungeordnete Liste (mit Punkten)

Das <ul> startet die Liste, jedes <li> ist ein einzelner Punkt.

<ul>
    <li>Äpfel</li>
    <li>Bananen</li>
</ul>

Ergebnis:

• Äpfel
• Bananen

🔹 Geordnete Liste (mit Zahlen)

Das <ol> zählt die Punkte automatisch durch.

<ol>
    <li>Erster Platz</li>
    <li>Zweiter Platz</li>
</ol>

Ergebnis:

1. Erster Platz
2. Zweiter Platz

5. Links und Bilder einfügen

🔹 Klickbarer Link

Das href gibt das Ziel an. target="_blank" sorgt dafür, dass sich ein neuer Tab öffnet.

<a href="https://modern-gaming.net/user/19127-dasisid3/" target="_blank"><span style="color: #4682b4; font-weight: bold;">Klick hier für mein Profil</span></a>

Ergebnis: Klick hier für mein Profil

🔹 Bild anzeigen

Das src enthält den direkten Link zur Bilddatei.

<img src="https://i.postimg.cc/Ss3Dmmwt/Screenshot-2025-06-07-130446.png" alt="Beispielbild">

Ergebnis:
   

6. Tabellen bauen

🔹 Einfache Tabelle

<table> ist der Rahmen, <tr> erzeugt eine Reihe (Zeile) und <td> erzeugt die einzelnen Zellen (Spalten).

<table border="1">
    <tbody>
        <tr>
            <td>Zeile 1, Zelle links</td>
            <td>Zeile 1, Zelle rechts</td>
        </tr>
        <tr>
            <td>Zeile 2, Zelle links</td>
            <td>Zeile 2, Zelle rechts</td>
        </tr>
    </tbody>
</table>

Ergebnis:

7. Zitate, Codeblöcke und Spoiler

🔹 Zitat-Block

Hebt den Text hervor und rückt ihn automatisch etwas ein.

<blockquote>Das ist ein wichtiges Zitat.</blockquote>

Ergebnis:

Zitat

Das ist ein wichtiges Zitat.

🔹 Code-Block

Zeigt Text genau so an, wie er getippt wurde. Perfekt, um selbst Code zu teilen.

<pre><code>Hallo Welt!</code></pre>

🔹 WoltLab Spoiler

Versteckt Inhalte hinter einem Button. (Dies ist eine spezielle Funktion der Forensoftware).

<woltlab-spoiler>
    <p>Dieser Text ist geheim!</p>
</woltlab-spoiler>

Ergebnis:

Wichtiger Tipp zum Schluss: Achtet immer darauf, dass ihr jeden HTML-Tag, den ihr öffnet (z.B. <div>), am Ende auch wieder schließt (</div>)! Befehle zur Anpassung der Schriftgröße (wie font-size) sind in diesem Forum aus Sicherheitsgründen deaktiviert.
Viel Erfolg beim Gestalten,

Dasisid3