Coden selber ausprobieren

HTML & CSS live ausprobieren

Schreibe Code links und sieh sofort das Ergebnis rechts. Mit Schritt-für-Schritt-Tutorial – ideal, um endlich zu verstehen, wie Webseiten wirklich aufgebaut sind.

20% Gründungsrabatt – erste 5 PlätzePakete ansehen

Schritt-für-Schritt-Tutorial

So funktioniert HTML – einfach erklärt

Eine Webseite besteht aus drei Teilen: HTML (der Inhalt), CSS (das Aussehen) und manchmal JavaScript (das Verhalten). Tags wie <h1>, <p>, <img> sind die Bausteine. Klick auf eine Lektion und der Code landet direkt im Editor.

1. Der Grundaufbau jeder HTML-Seite

Jede Webseite startet mit dieser Struktur. <head> enthält unsichtbare Infos (Titel, CSS), <body> alles, was man sieht.

<!DOCTYPE html>
<html lang="de">
  <head>
    <title>Meine Seite</title>
  </head>
  <body>
    <h1>Hallo Welt</h1>
    <p>Das ist mein erster Absatz.</p>
  </body>
</html>

2. Überschriften & Text

Mit <h1> bis <h6> machst du Überschriften (groß bis klein). <p> ist ein Absatz. <strong> macht fett, <em> kursiv.

<h1>Sehr große Überschrift</h1>
<h2>Mittlere Überschrift</h2>
<p>Ein normaler Absatz mit <strong>fett</strong> und <em>kursiv</em>.</p>

3. Bilder & Links

<img> bindet ein Bild ein (mit src + alt). <a> ist ein Link – href sagt, wohin er führt.

<img src="https://picsum.photos/400/200" alt="Zufallsbild" style="border-radius:12px" />
<p>
  Mehr Infos auf
  <a href="https://nova-creator.com" target="_blank">nova-creator.com</a>.
</p>

4. CSS – das Aussehen

CSS bestimmt Farben, Größen und Abstände. Du kannst es direkt mit style="..." oder gesammelt in <style> schreiben.

<style>
  .box {
    background: #4f46e5;
    color: white;
    padding: 20px;
    border-radius: 12px;
    font-family: sans-serif;
  }
</style>

<div class="box">Ich bin eine gestylte Box.</div>

5. Buttons mit Klick-Effekt

Mit onclick reagiert ein Button auf Klicks. :hover ändert das Aussehen, sobald die Maus drüberfährt.

<style>
  .btn {
    background: #ec4899;
    color: white;
    border: 0;
    padding: 12px 28px;
    border-radius: 999px;
    font-size: 16px;
    cursor: pointer;
    transition: transform .15s;
  }
  .btn:hover { transform: scale(1.05); }
</style>

<button class="btn" onclick="alert('Klick!')">Drück mich</button>

6. Layout mit Flexbox

display:flex stellt Elemente nebeneinander. Mit gap setzt du den Abstand, mit flex:1 teilen sie sich den Platz gleich auf.

<div style="display:flex; gap:16px">
  <div style="flex:1; padding:20px; background:#fef3c7; border-radius:12px">
    Spalte 1
  </div>
  <div style="flex:1; padding:20px; background:#dbeafe; border-radius:12px">
    Spalte 2
  </div>
  <div style="flex:1; padding:20px; background:#dcfce7; border-radius:12px">
    Spalte 3
  </div>
</div>

7. Eine Karte mit Schatten

Kombiniere padding, border-radius und box-shadow für moderne UI-Karten – so sieht heute fast jede gute Webseite aus.

<div style="
  max-width: 320px;
  padding: 24px;
  border-radius: 16px;
  background: white;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  font-family: sans-serif;
">
  <h2 style="margin:0 0 8px">Meine Karte</h2>
  <p style="margin:0; color:#555">
    Karten sind super, um Infos sauber zu gruppieren.
  </p>
</div>

8. Eine ganze Mini-Seite

Alles zusammen: Aufbau, Styling, Layout. Kopier das in den Editor und experimentiere mit Farben und Texten.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body { font-family: sans-serif; margin: 0; background: #f5f5f7; }
      header { background: #111; color: white; padding: 20px; text-align: center; }
      main { max-width: 600px; margin: 30px auto; padding: 20px; background: white; border-radius: 12px; }
    </style>
  </head>
  <body>
    <header><h1>Mein Café</h1></header>
    <main>
      <h2>Willkommen!</h2>
      <p>Frischer Kaffee, hausgemachter Kuchen, jeden Tag von 8–18 Uhr.</p>
    </main>
  </body>
</html>

Spielwiese

Dein eigener Code

Schreibe HTML und CSS links – die Vorschau aktualisiert sich automatisch.

Editor

index.html

<!DOCTYPE html>
<!--
  Willkommen bei Nova-creator!
  Das hier ist eine komplette Mini-Webseite – gleichzeitig
  Werbung für unser aktuelles Launch-Angebot.

Aufbau einer HTML-Seite:
    <!DOCTYPE html>      -> sagt: das ist HTML
    <html> ... </html>   -> umhüllt alles
      <head> ... </head> -> Infos für den Browser (Titel, CSS)
      <body> ... </body> -> Was man sieht
-->
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <title>30% Launch-Rabatt bei Nova-creator</title>

<style>
      * { box-sizing: border-box; }
      body {
        margin: 0;
        font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
        background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%);
        color: white;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem;
      }
      .card {
        background: rgba(255, 255, 255, 0.12);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 20px;
        padding: 2.5rem;
        max-width: 480px;
        text-align: center;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
      }
      .badge {
        display: inline-block;
        background: white;
        color: #4f46e5;
        font-weight: 700;
        font-size: 0.8rem;
        padding: 6px 14px;
        border-radius: 999px;
        margin-bottom: 1rem;
        letter-spacing: 0.02em;
      }
      h1 { font-size: 2.25rem; margin: 0 0 0.75rem; line-height: 1.15; }
      p  { font-size: 1rem; line-height: 1.5; opacity: 0.95; margin: 0 0 1.5rem; }
      .price { font-size: 1rem; margin: 0 0 1.5rem; opacity: 0.95; }
      .price s { opacity: 0.65; margin-right: 8px; }
      .price strong { font-size: 1.4rem; font-weight: 800; }
      .cta {
        display: inline-block;
        background: white;
        color: #4f46e5;
        text-decoration: none;
        border: 0;
        padding: 0.95rem 1.9rem;
        border-radius: 999px;
        font-weight: 700;
        font-size: 1rem;
        cursor: pointer;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
      }
      .cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
      }
      small { display: block; margin-top: 1rem; opacity: 0.75; font-size: 0.8rem; }
    </style>
  </head>

<body>
    
    <div class="card">
      <span class="badge">🚀 Launch-Angebot</span>
      <h1>30% Rabatt auf alle Webseiten-Pakete</h1>
      <p>
        Sichere dir jetzt deine professionelle Webseite von Nova-creator –
        nur noch bis zum <strong>20. August 2026</strong>.
      </p>
      <p class="price">
        <s>ab 990 €</s> <strong>ab 690 €</strong> <small>+ ab 29 €/Monat</small>
      </p>

<a class="cta" href="/preise#pakete" target="_top">
        Pakete ansehen →
      </a>

<small>Tipp: Klick den Button – du landest direkt bei den Preisen.</small>
    </div>
  </body>
</html>

Vorschau

Live

Tipp: Das hier ist nur ein erster Geschmack. Eine echte Webseite braucht Strategie, Design, SEO und sauberes Coding. Sichere dir noch einen der ersten 5 Plätze und spare 20% (Gründungsangebot).

Jetzt kostenloses Gespräch sichern