Einführung in die Webentwicklung

Die Webentwicklung basiert auf drei Kernelemente: HTML, CSS und JavaScript. In diesem Artikel konzentrieren wir uns auf die ersten beiden Bausteine - HTML5 und CSS3 - und zeigen, wie diese die Struktur und das Design moderner Webseiten bestimmen.

Was ist HTML5?

HTML (HyperText Markup Language) ist die Standardsprache für die Erstellung von Webseiten. Es beschreibt die Struktur einer Webseite durch eine Reihe von Elementen, die dem Browser mitteilen, wie der Inhalt dargestellt werden soll.

HTML5 ist die neueste Version und bringt zahlreiche Verbesserungen und neue Funktionen mit sich:

  • Semantische Elemente wie <header>, <footer>, <article>, <section>
  • Native Unterstützung für Audio- und Video-Inhalte
  • Canvas-Element für Grafiken und Animationen
  • Verbesserte Formularelemente
  • Lokale Speicherung von Daten

Beispiel einer einfachen HTML5-Struktur:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meine erste Webseite</title>
</head>
<body>
    <header>
        <h1>Willkommen auf meiner Webseite</h1>
    </header>
    
    <nav>
        <ul>
            <li><a href="#">Startseite</a></li>
            <li><a href="#">Über uns</a></li>
            <li><a href="#">Kontakt</a></li>
        </ul>
    </nav>
    
    <main>
        <article>
            <h2>Hauptinhalt</h2>
            <p>Dies ist der Hauptinhalt meiner Webseite.</p>
        </article>
    </main>
    
    <footer>
        <p>© 2023 Meine Webseite</p>
    </footer>
</body>
</html>

Was ist CSS3?

CSS (Cascading Style Sheets) ist die Sprache, die verwendet wird, um das Erscheinungsbild von HTML-Elementen zu gestalten. Mit CSS können wir Farben, Schriftarten, Abstände, Layouts und vieles mehr festlegen.

CSS3 bringt viele neue Funktionen und Verbesserungen:

  • Flexbox und Grid für fortschrittliche Layouts
  • Animationen und Übergänge
  • Schatten und Rundungen
  • Mehrfache Hintergründe
  • Media Queries für responsive Design

Beispiel für einfache CSS3-Styles:

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #35424a;
    color: white;
    padding: 20px;
    text-align: center;
}

nav ul {
    list-style: none;
    padding: 0;
    background: #333;
    text-align: center;
}

nav li {
    display: inline-block;
    padding: 10px;
}

nav a {
    color: white;
    text-decoration: none;
}

main {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

footer {
    background-color: #35424a;
    color: white;
    text-align: center;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

HTML und CSS zusammenbringen

Um CSS mit HTML zu verbinden, gibt es mehrere Methoden:

  1. Externe Stylesheet-Datei (empfohlen): 
    <link rel="stylesheet" href="styles.css">
  2. Internes Stylesheet im <head>-Bereich: 
    <style>
    body { background-color: lightblue; }
</style>
  3. Inline-Styles direkt im HTML-Element: 
    <p style="color: red;">Dieser Text ist rot.</p>

Responsive Webdesign mit CSS3

Eines der wichtigsten Konzepte im modernen Webdesign ist die Responsivität - die Fähigkeit einer Website, sich automatisch an verschiedene Bildschirmgrößen anzupassen. Dies wird hauptsächlich mit CSS Media Queries erreicht:

/* Grundstil für alle Geräte */
.container {
    width: 80%;
    margin: 0 auto;
}

/* Stile für Tablets */
@media (max-width: 768px) {
    .container {
        width: 90%;
    }
}

/* Stile für Smartphones */
@media (max-width: 480px) {
    .container {
        width: 100%;
        padding: 0 10px;
    }
}

Nächste Schritte

Nachdem du die Grundlagen von HTML5 und CSS3 verstanden hast, empfehlen wir dir:

  • Erstelle deine eigene einfache Webseite
  • Experimentiere mit verschiedenen HTML-Elementen und CSS-Eigenschaften
  • Lerne, wie man ein responsives Layout mit Flexbox oder Grid erstellt
  • Tauche tiefer in CSS-Animationen und -Übergänge ein
  • Erkunde unser nächstes Tutorial zum Responsive Design

Mit diesen Grundlagen bist du bereit, deine Reise in die Welt des Webdesigns zu beginnen. Viel Erfolg!