HTML und CSS verstehen: Die Bausteine des Webdesigns

Eine Illustration, die HTML- und CSS-Code-Blöcke zeigt, die sich zu einer Webseite zusammensetzen. Die Grafik verwendet dünne, kontinuierliche Linien in marineblau auf weißem Hintergrund.

In diesem umfassenden Leitfaden für Anfänger erklären wir die Grundlagen von HTML und CSS, ihre Rolle im Webdesign und bieten praktische Beispiele zum Mitmachen.

Was ist HTML?

HTML (Hypertext Markup Language) ist die Grundstruktur jeder Webseite. Es definiert den Inhalt und die Struktur einer Seite.

Grundlegende HTML-Struktur

      
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Meine erste Webseite</title>
  </head>
  <body>
    <h1>Willkommen zu meinem Web-Design-Kurs!</h1>
    <p>Hier lernen Sie die Grundlagen des Webdesigns.</p>
  </body>
</html>

Was ist CSS?

CSS (Cascading Style Sheets) ist für das Aussehen und Layout einer Webseite verantwortlich. Es bestimmt, wie HTML-Elemente dargestellt werden.

Einfaches CSS-Beispiel

      
body {
  font-family: 'Inter', sans-serif;
  color: #000080;
  background-color: #FFFFFF;
}

h1 {
  font-family: 'Montserrat', sans-serif;
  color: #ADD8E6;
}

p {
  line-height: 1.5;
}

HTML und CSS zusammen verwenden

Um HTML und CSS zu verbinden, fügen Sie einen Link zu Ihrer CSS-Datei im <head>-Bereich Ihres HTML-Dokuments ein:

      
<head>
  <link rel="stylesheet" href="styles.css">
</head>

Praktische Übung

Erstellen Sie eine einfache Webseite mit einem Titel, einem Absatz und einem Bild. Stylen Sie diese Elemente mit CSS.

HTML:

      
<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Mein Web-Design-Projekt</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Willkommen zu meinem Webdesign-Kurs</h1>
    <p>Hier lernen Sie, wie man attraktive und funktionale Webseiten erstellt.</p>
    <img src="webdesign.jpg" alt="Ein Laptop mit Codezeilen auf dem Bildschirm">
  </body>
</html>

CSS:

      
body {
  font-family: 'Inter', sans-serif;
  background-color: #E6E6FA;
  color: #000080;
  line-height: 1.5;
  padding: 20px;
}

h1 {
  font-family: 'Montserrat', sans-serif;
  color: #000080;
  font-size: 36px;
}

p {
  font-size: 16px;
  margin-bottom: 20px;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

Mit diesen Grundlagen können Sie beginnen, Ihre eigenen Webseiten zu erstellen und zu gestalten. Üben Sie regelmäßig und experimentieren Sie mit verschiedenen HTML-Elementen und CSS-Eigenschaften, um Ihre Fähigkeiten zu verbessern.

Fazit

HTML und CSS sind die Grundbausteine des Webdesigns. Mit HTML strukturieren Sie Ihren Inhalt, während CSS Ihnen die Möglichkeit gibt, Ihre Webseite visuell ansprechend zu gestalten. Je mehr Sie üben und experimentieren, desto besser werden Ihre Webdesign-Fähigkeiten.

Viel Erfolg bei Ihrem Web-Design-Kurs und Ihrer Reise zum Webdesigner!