🎓 Für Einsteiger

Lern HTML & CSS

Was ist was, wie schreibt man es — und wie sieht es im Browser aus.

<p> <a href=""> <div> <img> color: padding: display: flex
HTML

Die wichtigsten Tags

Links: Code  ·  Rechts: Ergebnis im Browser
<p> Text / Absatz Paragraph
CODE
<p>Das ist ein Absatz.</p>
<p>Noch ein Absatz.</p>
IM BROWSER

Das ist ein Absatz.

Noch ein Absatz.

<a> Link Anchor
CODE
<a href="https://google.com">
  Zu Google
</a>
IM BROWSER
Zu Google
<h1> – <h6> Überschriften Heading 1–6
CODE
<h1>Überschrift 1</h1>
<h2>Überschrift 2</h2>
<h3>Überschrift 3</h3>
<h4>Überschrift 4</h4>
IM BROWSER
Überschrift 1
Überschrift 2
Überschrift 3
Überschrift 4
<div> Box / Container Division
CODE
<div style="
  background: #EEF2FF;
  padding: 12px;
  border-radius: 8px;
">
  Ich bin eine Box!
</div>
IM BROWSER
Ich bin eine Box!
<img> Bild Image — selbstschließend
CODE
<img
  src="foto.jpg"
  alt="Mein Foto"
  width="160"
/>
IM BROWSER
🖼️

alt wird angezeigt wenn Bild fehlt

<span> Inline-Markierung Inline Container
CODE
<p>
  Text mit
  <span style="color:red">
    roter Farbe
  </span>
  drin.
</p>
IM BROWSER

Text mit roter Farbe drin.

<button> Schaltfläche Button
CODE
<button>
  Klick mich!
</button>

<button disabled>
  Deaktiviert
</button>
IM BROWSER
<form> Formular Daten absenden
CODE
<form
  action="/senden"
  method="POST"
>
  <!-- Felder hier -->
  <button type="submit">
    Absenden
  </button>
</form>
IM BROWSER
<form> ist unsichtbar.
Bündelt Felder und Button,
schickt Daten an den Server.
<input> Eingabefeld Verschiedene Typen
CODE
<input
  type="text"
  placeholder="Dein Name"
/>
<input
  type="email"
  placeholder="E-Mail"
/>
<input type="checkbox" />
Ich stimme zu
IM BROWSER
<label> Beschriftung Verbindet Text mit Input
CODE
<label for="name">
  Dein Name:
</label>
<input
  id="name"
  type="text"
/>
IM BROWSER

Klick auf das Label → fokussiert das Feld

CSS

Wichtigste Eigenschaften

Syntax:  eigenschaft: wert;
colorTextfarbe
p {
  color: #E34C26;
}

Hallo Welt!

background-colorHintergrundfarbe
div {
  background-color: #EEF2FF;
}
Hintergrund
font-sizeSchriftgröße
h1 { font-size: 32px; }
p  { font-size: 16px; }
sm { font-size: 12px; }
32px 16px 12px
font-weightSchriftstärke
/* 100–900 */
p { font-weight: 400; }
b { font-weight: 700; }
h { font-weight: 900; }
400 — Normal 700 — Fett 900 — Extra fett
marginAußenabstand (außerhalb der Box)
div {
  margin: 16px;
  /* oder getrennt: */
  margin-top: 8px;
  margin-bottom: 8px;
}
margin
Element
paddingInnenabstand (innerhalb der Box)
div {
  padding: 20px;
  /* oder getrennt: */
  padding-left: 24px;
  padding-right: 24px;
}
padding
Inhalt
borderRahmen um ein Element
div {
  border: 2px solid #264DE4;
/* ↑Stärke ↑Art  ↑Farbe */
}
Rahmen!
border-radiusRunde Ecken
div    { border-radius: 8px;  }
circle { border-radius: 50%; }
/* 50% = perfekter Kreis */
width / heightBreite & Höhe
div {
  width: 120px;
  height: 60px;
  /* auch: 50%, 100%, auto */
}
120 × 60 px
displayAnzeigetyp des Elements
.box  { display: block;  }
.text { display: inline; }
.lay  { display: flex;   }
.grd  { display: grid;   }
.gone { display: none;   }
block — ganze Zeile
Normal inline Text läuft weiter
Flexbox

Layout mit Flexbox

Alles startet mit display: flex
display: flex
Aktiviert Flexbox — Kinder stehen nebeneinander
ohne flex → untereinander (block)
1
2
3
display: flex → nebeneinander
1
2
3
flex-direction
Richtung: row = waagrecht (Standard), column = senkrecht
flex-direction: row (Standard)
1
2
3
flex-direction: column
1
2
3
justify-content
Ausrichtung entlang der Hauptachse (bei row = horizontal)
justify-content: flex-start
1
2
3
justify-content: center
1
2
3
justify-content: space-between
1
2
3
align-items
Ausrichtung auf der Querachse (bei row = vertikal)
align-items: flex-start
1
2
3
align-items: center
1
2
3
gap
Abstand zwischen allen Flex-Elementen
gap: 4px
1
2
3
gap: 24px
1
2
3
flex-wrap
Erlaubt Umbruch wenn kein Platz mehr ist
flex-wrap: nowrap (Standard — Überlauf!)
Box 1
Box 2
Box 3
Box 4
flex-wrap: wrap → bricht um ✓
Box 1
Box 2
Box 3
Box 4
Beispiel

Eine kleine Webseite

Code links  ·  Ergebnis rechts
profil.html 
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Mein Profil</title>
  <style>

    body {
      font-family: Arial, sans-serif;
      background: #F0F4FF;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
    }

    .karte {
      background: white;
      border-radius: 16px;
      padding: 32px;
      width: 320px;
      box-shadow: 0 8px 32px
        rgba(0, 0, 0, 0.12);
    }

    .avatar {
      width: 68px;
      height: 68px;
      background: #264DE4;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      margin-bottom: 16px;
    }

    h1 {
      font-size: 22px;
      margin-bottom: 4px;
    }

    p {
      color: #6B7280;
      font-size: 14px;
    }

    .tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin: 14px 0;
    }

    .tag {
      background: #EEF2FF;
      color: #264DE4;
      padding: 3px 10px;
      border-radius: 100px;
      font-size: 12px;
      font-weight: 600;
    }

    a {
      display: inline-block;
      background: #264DE4;
      color: white;
      padding: 10px 22px;
      border-radius: 100px;
      text-decoration: none;
      font-weight: 700;
      font-size: 14px;
    }

  </style>
</head>
<body>

  <div class="karte">

    <div class="avatar">👨‍💻</div>

    <h1>Max Mustermann</h1>
    <p>Frontend Entwickler · Wien</p>

    <div class="tags">
      <span class="tag">HTML</span>
      <span class="tag">CSS</span>
      <span class="tag">JavaScript</span>
    </div>

    <a href="mailto:max@example.com">
      Kontakt
    </a>

  </div>

</body>
</html>
profil.html
👨‍💻
Max Mustermann
Frontend Entwickler · Wien
HTML CSS JavaScript
Kontakt