HTML & CSS Grundlagen – Erste Schritte zur eigenen Webseite

1. Projektordner anlegen

mkdir meine-webseite
cd meine-webseite
touch index.html
touch style.css

Grundstruktur:

meine-webseite/
├── index.html
└── style.css

index.html ist der Standardname für die Startseite — Browser und Server erkennen diese Datei automatisch als Einstiegspunkt.

2. Das HTML-Grundgerüst

Jede HTML-Datei beginnt mit diesem festen Skelett:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Meine Webseite</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1>Willkommen auf meiner Webseite</h1>
  <p>Das ist mein erster Absatz.</p>

</body>
</html>

Zeile	Bedeutung
`<!DOCTYPE html>`	sagt dem Browser: "das ist HTML5"
`<html lang="de">`	Start des Dokuments, Sprache = Deutsch
`<head>`	unsichtbarer Bereich: Metadaten, Titel, CSS-Verknüpfung
`<meta charset="UTF-8">`	sorgt für korrekte Umlaute (ä, ö, ü)
`<meta name="viewport"...>`	macht die Seite auf Handys richtig skaliert
`<title>`	Text im Browser-Tab
`<link rel="stylesheet" href="style.css">`	verknüpft die CSS-Datei
`<body>`	sichtbarer Inhalt der Seite

3. Die Seite im Browser ansehen

Einfachste Methode: Doppelklick auf index.html → öffnet im Standardbrowser.

Über das Terminal (Mac):

open index.html

Mit Live-Reload (empfohlen, z.B. in Cursor/VS Code): Erweiterung "Live Server" → Rechtsklick auf index.html → "Open with Live Server".

4. Wichtigste HTML-Elemente zum Start

<h1>Große Überschrift</h1>
<h2>Kleinere Überschrift</h2>
<p>Ein normaler Textabsatz.</p>
<a href="https://google.com">Ein Link</a>
<img src="bild.jpg" alt="Beschreibung des Bildes">
<ul>
  <li>Listenpunkt 1</li>
  <li>Listenpunkt 2</li>
</ul>
<div>Ein allgemeiner Container/Block</div>
<span>Ein Inline-Element (z.B. für Textteile)</span>
<button>Klick mich</button>

5. CSS mit HTML verknüpfen

Bereits im <head> erledigt durch:

<link rel="stylesheet" href="style.css">

Ab jetzt gilt: alles, was in style.css steht, wirkt auf index.html.

6. Erste CSS-Regeln

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
  color: #333;
  line-height: 1.6;
}

h1 {
  color: #2c3e50;
  font-size: 2rem;
}

p {
  margin-bottom: 1rem;
}

Aufbau: selektor { eigenschaft: wert; }

Selektor-Typ	Beispiel	Trifft auf
Element	`p { }`	alle `<p>`-Tags
Klasse	`.karte { }`	alle Elemente mit `class="karte"`
ID	`#header { }`	das eine Element mit `id="header"`

7. Klassen & IDs verwenden

<div class="karte">
  <h2>Titel</h2>
  <p>Beschreibungstext.</p>
</div>

.karte {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

Klassen (.name) kannst du mehrfach verwenden — IDs (#name) nur einmal pro Seite.

8. Layout mit Flexbox

.container {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

Damit lassen sich Elemente nebeneinander ausrichten, zentrieren und verteilen — die Basis für die meisten modernen Layouts.

Merksatz

HTML = Struktur (was ist da)
CSS = Aussehen (wie sieht es aus)

Immer zuerst die HTML-Struktur mit den richtigen Tags aufbauen, dann mit CSS gestalten. Bei jeder Änderung: Datei speichern → Browser aktualisieren (oder Live Server nutzen).