Es gibt zwei grundlegende Technologien, die jeder kennen sollte, der in die Welt der Webentwicklung einsteigen möchte: HTML und CSS. Diese beiden Sprachen bilden das Gerüst und das Aussehen von Websites. HTML (HyperText Markup Language) strukturiert den Inhalt, während CSS (Cascading Style Sheets) bestimmt, wie dieser Inhalt angezeigt wird. In diesem Artikel werden wir die Grundlagen von HTML und CSS, ihre Bedeutung und ihre Verwendung im Detail untersuchen.

Was ist HTML?

HTML ist eine Auszeichnungssprache, die die Grundlage von Webseiten bildet. HTML-Tags werden verwendet, um Text, Bilder, Links und andere Inhaltselemente zu strukturieren. Jedes HTML-Tag teilt dem Browser mit, wie der Inhalt angezeigt werden soll. HTML bildet das Gerüst einer Webseite und definiert die Bedeutung und Struktur des Inhalts.

Grundlegende HTML-Tags

Es gibt viele verschiedene Tags in HTML, aber einige sind grundlegender und werden häufiger verwendet. Hier sind einige der wichtigsten:

<html>: Das Root-Tag des HTML-Dokuments.
<head>: Enthält Metadaten über das Dokument (Titel, Zeichensatz, Stilvorlagen usw.).
<title>: Definiert den Titel, der im Browser-Tab angezeigt wird.
<body>: Enthält den Inhalt der Webseite (Text, Bilder, Links usw.).
<h1> - <h6>: Definiert Überschriften (<h1> ist die größte Überschrift, <h6> die kleinste).
<p>: Definiert Absätze.
<a>: Definiert Hyperlinks (Links). Das Attribut href gibt die Ziel-URL an.
<img>: Definiert Bilder. Das Attribut src gibt die URL der Bilddatei an. Das Attribut alt gibt alternativen Text an, der angezeigt wird, wenn das Bild nicht geladen werden kann oder von Bildschirmleseprogrammen verwendet wird.
<ul> und <li>: Definiert ungeordnete Listen (unordered lists). Die <li>-Tags geben die Listenelemente an.
<ol> und <li>: Definiert geordnete Listen (ordered lists). Die <li>-Tags geben die Listenelemente an.
<div>: Definiert Bereiche (divisions). Wird verwendet, um Inhalte zu gruppieren und zu gestalten.
<span>: Definiert Textfragmente (spans). Wird verwendet, um einen bestimmten Abschnitt innerhalb von Text zu gestalten.

HTML-Beispiel

Das folgende Beispiel zeigt die Struktur eines einfachen HTML-Dokuments:


<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Einfaches HTML-Dokument</title>
</head>
<body>
    <h1>Hallo Welt!</h1>
    <p>Dies ist ein einfaches HTML-Dokument.</p>
    <a href="https://www.example.com">Beispiel-Webseite</a>
    <img src="bild.jpg" alt="Beschreibendes Bild">
</body>
</html>

Was ist CSS?

CSS (Cascading Style Sheets) ist eine Stilsprache, die verwendet wird, um das Aussehen von Webseiten zu steuern, die mit HTML erstellt wurden. CSS definiert Farben, Schriftarten, Layout, Animationen und andere visuelle Eigenschaften. CSS trennt die Präsentation vom Inhalt und erleichtert die Steuerung des Erscheinungsbilds und sorgt für ein einheitliches Erscheinungsbild von Websites.

CSS-Selektoren und -Eigenschaften

In CSS werden Stilregeln mithilfe von Selektoren und Eigenschaften definiert. Selektoren geben an, auf welche HTML-Elemente der Stil angewendet werden soll, während Eigenschaften definieren, wie diese Elemente aussehen sollen.

Selektoren: Werden verwendet, um HTML-Elemente anzusprechen (z. B. p (Absatzelemente), .klassenname (Elemente mit einem Klassennamen), #id-name (Elemente mit einem ID-Namen)).
Eigenschaften: Werden verwendet, um das Aussehen von Elementen zu steuern (z. B. color (Textfarbe), font-size (Schriftgröße), background-color (Hintergrundfarbe), margin (Außenabstand), padding (Innenabstand)).

CSS-Anwendungsmethoden

CSS kann auf drei verschiedene Arten auf ein HTML-Dokument angewendet werden:

Inline-CSS: Der Stil wird direkt innerhalb der HTML-Tags mithilfe des Attributs style definiert. Wird im Allgemeinen nicht empfohlen, da es die Lesbarkeit und Wartung des Codes erschwert.
Internes CSS: Der Stil wird innerhalb des <style>-Tags im <head>-Bereich definiert. Kann für kleine Projekte geeignet sein.
Externes CSS: Eine separate .css-Datei wird erstellt und mit dem <link>-Tag mit dem HTML-Dokument verknüpft. Dies ist die beste Vorgehensweise, da sie sicherstellt, dass der Code organisiert und verwaltbar ist.

CSS-Beispiel

Das folgende Beispiel zeigt, wie eine externe CSS-Datei verwendet wird und grundlegende Stileigenschaften:

HTML (index.html):


<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS-Beispiel</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Hallo Welt!</h1>
    <p>Dies ist ein mit CSS gestalteter Absatz.</p>
</body>
</html>

CSS (style.css):


body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

h1 {
    color: #333;
    text-align: center;
}

p {
    color: #666;
    font-size: 16px;
    line-height: 1.5;
}

HTML und CSS im Zusammenspiel

HTML und CSS arbeiten zusammen, um sowohl die Struktur als auch das Aussehen von Websites zu erstellen. HTML definiert den Inhalt, während CSS bestimmt, wie dieser Inhalt angezeigt wird. Diese Trennung ermöglicht es Webentwicklern, Inhalt und Präsentation separat zu verwalten, was die Aktualisierung und Wartung von Websites erleichtert.

Responsives Design

Heutzutage ist es wichtig, dass Websites auf verschiedenen Geräten (Desktop, Tablet, Mobil) korrekt angezeigt werden. Responsives Design ermöglicht es Websites, sich mithilfe von CSS automatisch an die Bildschirmgröße anzupassen. Media Queries werden in CSS verwendet, um unterschiedliche Stilregeln für unterschiedliche Bildschirmgrößen zu definieren.

Beispiel für eine Media Query:


/* Stilregeln für kleine Bildschirme */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }

    h1 {
        font-size: 2em;
    }
}

/* Stilregeln für große Bildschirme */
@media (min-width: 992px) {
    body {
        font-size: 16px;
    }

    h1 {
        font-size: 2.5em;
    }
}

Fazit und Zusammenfassung

HTML und CSS sind die Eckpfeiler der Webentwicklung. HTML definiert die Struktur und den Inhalt von Webseiten, während CSS bestimmt, wie dieser Inhalt angezeigt wird. Die gemeinsame Verwendung dieser beiden Sprachen ermöglicht es Webentwicklern, beeindruckende, benutzerfreundliche und barrierefreie Websites zu erstellen. Das Erlernen von HTML und CSS ist der wichtigste Schritt, um in die Welt der Webentwicklung einzusteigen. In diesem Artikel haben wir die Grundlagen von HTML und CSS, ihre Bedeutung und ihre Verwendung untersucht. Wir wünschen Ihnen viel Erfolg auf Ihrer Reise in die Webentwicklung!