HTML & CSS Grundlagen – Webdesign-Tutorial

HTML & CSS Grundlagen für moderne Websites

HTML und CSS sind die Grundlagen jeder Website. In diesem Tutorial lernen Sie die wichtigsten Konzepte und Techniken für die Entwicklung moderner Websites.

1. HTML-Grundlagen

HTML (HyperText Markup Language) ist die Struktursprache des Webs. HTML definiert die Struktur und den Inhalt einer Website mit semantischen Elementen.

Grundlegende HTML-Struktur

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Meine Website</title>
</head>
<body>
  <header>
    <h1>Willkommen</h1>
  </header>
  <main>
    <section>
      <h2>Überschrift</h2>
      <p>Absatz-Text</p>
    </section>
  </main>
  <footer>
    <p>Footer-Text</p>
  </footer>
</body>
</html>

2. CSS-Grundlagen

CSS (Cascading Style Sheets) ist die Stylesheet-Sprache für das Styling von Websites. CSS definiert das Aussehen, Layout und Design von HTML-Elementen.

Grundlegende CSS-Syntax

/* Selektor */
h1 {
  /* Eigenschaften */
  color: #333;
  font-size: 2rem;
  margin-bottom: 1rem;
}

/* Klasse */
.button {
  background: #007bff;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
}

/* ID */
#header {
  background: #f8f9fa;
  padding: 1rem;
}

3. Semantisches HTML

Semantisches HTML verwendet bedeutungsvolle Elemente wie <header>, <nav>, <main>, <section>, <article> und <footer> für bessere Struktur und SEO.

4. CSS-Selektoren

CSS-Selektoren ermöglichen das gezielte Styling von Elementen. Element-Selektoren, Klassen, IDs, Attribute und Pseudo-Klassen bieten flexible Styling-Möglichkeiten.

5. Box-Model

Das CSS Box-Model besteht aus Content, Padding, Border und Margin. Verständnis des Box-Models ist essentiell für korrektes Layout und Spacing.

6. Flexbox & Grid

Flexbox und CSS Grid sind moderne Layout-Techniken für flexible, responsive Layouts. Flexbox für eindimensionale Layouts, Grid für zweidimensionale Layouts.