Zum Hauptinhalt springen
Inhaltsverzeichnis

Links, Bilder & Selektoren

Bisher wurde HTML- und CSS-Code direkt im Browser-Editor geschrieben — praktisch zum Ausprobieren, aber kein echter Entwicklungsworkflow. Für ein eigenes Webseiten-Projekt arbeitet man stattdessen mit einem Code-Editor und speichert die Dateien lokal auf dem Computer. Diese Seite beginnt daher mit dem Umstieg auf diese Arbeitsweise.

Außerdem kommen drei Konzepte hinzu, ohne die eine echte Webseite kaum denkbar ist: Links, die Seiten miteinander vernetzen, Bilder, die Inhalte visuell aufwerten, und CSS-Klassen, mit denen sich einzelne Elemente gezielt ansprechen lassen.

Lokales Arbeiten​

Statt im Browser-Editor zu arbeiten, werden ab jetzt echte Dateien auf dem Computer erstellt und bearbeitet.

Projektordner und Dateien​

Ein relativer Pfad gibt den Speicherort einer Datei ausgehend vom aktuellen Ordner an, z. B. style.css (gleicher Ordner) oder bilder/foto.jpg (Unterordner). Ein absoluter Pfad beginnt immer von einem festen Ausgangspunkt, z. B. H:\webseite\style.css. Zuerst muss einen Ordner für das Projekt angelegt werden, z. B. meine-webseite in deinem Informatik-Ordner. Alle Projektdateien kommen in diesen Ordner. Das ist entscheidend, damit relative Pfade (für CSS und Bilder) korrekt funktionieren. Eine typische Struktur sieht so aus:

meine-webseite/
├── index.html       ← Die Startseite
├── style.css        ← Die Stilvorlage
└── bilder/          ← Unterordner für Bilder (später)

Die CSS-Datei wird wie bekannt im <head> eingebunden. Da beide Dateien im selben Ordner liegen, reicht der einfache Dateiname als Pfad:

<head>
    <meta charset="UTF-8">
    <title>Meine Webseite</title>
    <link rel="stylesheet" href="style.css">
</head>
Projektordner in Visual Studio Code öffnen

Visual Studio Code (kurz: VSCode) ist ein kostenloser Code-Editor, der besonders für Webentwicklung gut geeignet ist. Er lässt sich unter code.visualstudio.com herunterladen.

Den Projektordner in VSCode öffnen geht so:

  1. VSCode starten
  2. Datei → Ordner öffnen… wählen
  3. Den Projektordner (meine-webseite) auswählen

In der linken Seitenleiste erscheint danach der Datei-Explorer mit allen Dateien des Ordners. Neue Dateien lassen sich per Rechtsklick → Neue Datei anlegen. VSCode erkennt .html- und .css-Dateien automatisch und hebt die Syntax farblich hervor.

Im Browser öffnen​

Die fertige index.html lässt sich per Doppelklick im Betriebssystem-Dateiexplorer direkt im Browser öffnen. Ohne Live-Server aktualisiert sich der Browser nicht automatisch — der Arbeitsablauf ist daher immer:

  1. Änderung vornehmen
  2. Strg + S zum Speichern
  3. Im Browser F5 zum Neu laden
Unsaved-Indikator in VSCode

Ein kleiner Punkt (●) neben dem Dateinamen im Editor-Tab zeigt an, dass noch nicht gespeichert wurde. Wenn eine Änderung im Browser nicht sichtbar ist, ist das fast immer die Ursache.

Das Wort „Web" in World Wide Web beschreibt genau das: ein Geflecht aus miteinander verknüpften Seiten. Dieses Geflecht entsteht durch Hyperlinks, in HTML werden sie mit dem <a>-Tag (anchor, Anker) erzeugt.

<a href="https://www.wikipedia.org">Wikipedia aufrufen</a>

Der Text zwischen den Tags wird im Browser anklickbar. Das Attribut href (hypertext reference) gibt das Ziel des Links an. Ohne href ist ein <a>-Tag ein leerer Anker ohne Funktion.

Es gibt zwei grundlegende Arten von Links:

ArtBeispielBeschreibung
Absoluter Linkhref="https://wikipedia.org"Vollständige Adresse für externe Webseiten
Relativer Linkhref="kontakt.html"Nur der Dateiname für eigene Unterseiten

Ein relativer Link sucht die Zieldatei im selben Ordner wie die aktuelle HTML-Datei. Beim Aufbau einer mehrseitigen eigenen Webseite wird man fast ausschließlich relative Links verwenden.

Standardmäßig sind Links blau und unterstrichen. Mit CSS lassen sie sich wie jedes andere Element gestalten:

/* Alle Links auf der Seite */
a {
    color: #0d3b66;
    text-decoration: none;      /* Unterstrich entfernen */
}

Bilder​

Bilder werden mit dem selbstschließenden <img>-Tag eingebunden. Er hat zwei wichtige Attribute:

<img src="katze.jpg" alt="Eine graue Katze sitzt auf einem Fensterbrett">
  • src (source): Der Pfad zur Bilddatei — relativ (im eigenen Projektordner) oder absolut (URL).
  • alt (alternative text): Ein beschreibender Text, der angezeigt wird, wenn das Bild nicht geladen werden kann. Er wird außerdem von Screenreadern für sehbehinderte Nutzer vorgelesen. Das alt-Attribut ist deshalb kein optionales Extra, sondern ein Standard guter Webentwicklung.

Dateipfade und Projektstruktur​

In einem eigenen Webprojekt liegen Bilder oft in einem Unterordner, z. B. bilder/. Der Pfad im src-Attribut muss diesen Ordner einbeziehen:

<!-- Bild liegt im selben Ordner wie die HTML-Datei -->
<img src="logo.png" alt="Logo der Schule">

<!-- Bild liegt im Unterordner "bilder/" -->
<img src="bilder/hintergrund.jpg" alt="Hintergrundbild">

Bilder mit CSS anpassen​

Ein <img>-Tag lädt von sich aus das Originalbild in Originalgröße — das kann das Layout sprengen. Die Größe sollte daher immer per CSS gesteuert werden:

img {
    width: 300px;    /* Feste Breite */
    height: auto;    /* Höhe wird proportional skaliert — kein Verzerren */
}
Orientierungsfragen
  • Warum ist das alt-Attribut kein optionales Extra?
  • Was passiert, wenn src="bilder/foto.jpg" angegeben ist, der Ordner bilder/ aber nicht existiert?
  • Erkläre den Unterschied zwischen width: 300px und width: 50% bei einem Bild.

Klassen​

Bisher wurden ausschließlich Typselektoren verwendet — z. B. h1 { ... } oder p { ... }. Das Problem: Ein Typselektor trifft alle Elemente dieses Typs gleichzeitig. Wenn man nur einen bestimmten Absatz hervorheben möchte, ohne alle anderen zu verändern, reicht das nicht aus.

Dafür gibt es in HTML das Attribut class. Eine Klasse ist ein selbst gewählter Name, den man beliebig vielen Elementen geben kann. In CSS wird sie mit einem Punkt vor dem Namen angesprochen:

<!-- HTML: Klasse vergeben -->
<p class="hinweis">Achtung: Diese Aufgabe ist schwieriger.</p>
<p>Ein normaler Absatz ohne besondere Klasse.</p>
<p class="hinweis">Noch ein Hinweis weiter unten.</p>
/* CSS: Nur Elemente mit class="hinweis" werden gestylt */
.hinweis {
    background-color: #fff3cd;
    border-left: 4px solid #f0ad4e;
    padding: 10px;
}

Nur die beiden Absätze mit class="hinweis" erhalten den gelben Hintergrund — der normale Absatz bleibt unverändert. Klassen lassen sich auch kombinieren: class="hinweis wichtig" bedeutet, dass das Element beide Klassen trägt und von beiden Selektoren angesprochen wird.

Klasse und Typselektor kombinieren​

Selektoren lassen sich auch verknüpfen. p.hinweis trifft nur <p>-Elemente mit der Klasse hinweis, nicht aber ein <div class="hinweis">:

p.hinweis {
    font-style: italic;
}

Beispiel: Webseite zentrieren​

Eine sehr häufige Anwendung für Klassen ist das Zentrieren des Seiteninhalts. Dafür wird ein <div> um den gesamten Inhalt gelegt und mit einer Klasse versehen:

max-width statt width: Die Seite bleibt auf kleinen Bildschirmen (Handy) voll breit und wird erst auf großen Bildschirmen begrenzt.

margin: 0 auto verteilt den verbleibenden Platz links und rechts gleichmäßig — das Element ist damit horizontal zentriert. Das funktioniert allerdings nur, wenn das Element eine feste (oder maximale) Breite hat; ohne width oder max-width nimmt ein <div> die volle Breite ein und es gibt keinen Platz zum Verteilen.

body {
    background-color: #d6e4f0;  /* Hintergrund der gesamten Seite */
    margin: 0;
    padding: 20px 0;
    font-family: Arial, sans-serif;
}

.container {
    max-width: 500px;       /* Maximale Breite — hier ausprobieren! */
    margin: 0 auto;         /* Links und rechts automatisch → zentriert */
    padding: 20px 24px;     /* Innenabstand */
    background-color: white;
}
Webseite zentrieren
Orientierungsfragen
  • Was ist der Unterschied zwischen p { color: red; } und .rot { color: red; }?
  • Welcher CSS-Selektor trifft das Element <li class="aktiv">?
  • Warum funktioniert margin: 0 auto nicht ohne eine definierte Breite?
Training: Verständnisfragen
  • Links: Erkläre den Unterschied zwischen einem absoluten und einem relativen Link. Gib je ein Beispiel an.
  • Links gestalten: Betrachte das folgende CSS: a { text-decoration: none; }. Was bewirkt es und warum ist das manchmal problematisch für die Nutzerführung?
  • Klassen: Gegeben sei <p class="info">Text</p>. Welche der folgenden Selektoren treffen dieses Element? Begründe jede Antwort: p, .info, div.info, p.info.
  • Klassen: Du hast drei <div>-Elemente auf einer Seite. Eines davon soll einen roten Rahmen bekommen, die anderen nicht. Erkläre, wie du das umsetzt (mit HTML und CSS).
  • Zentrieren: Erkläre, was .container { max-width: 900px; margin: 0 auto; } bewirkt und warum max-width sinnvoller ist als width.
Training: Webseite erweitern

Erweitere deine bisherige Webseite (Überlebensstrategien im Computerraum) und arbeite sie jetzt lokal mit echten Dateien weiter aus:

  1. Füge am Ende der Seite einen Link auf https://hhgym.de ein. Der Link soll in einem neuen Tab öffnen (target="_blank").
  2. Suche ein lizenzfreies Bild (z. B. bei Unsplash oder Pixabay) zum Thema Schule oder Computer. Speichere es im Unterordner bilder/, binde es mit <img> ein und vergib ein sinnvolles alt-Attribut. Begrenze die Breite per CSS auf 400px.
  3. Umschließe den gesamten Seiteninhalt mit einem <div class="container"> und style die Klasse so, dass der Inhalt bei breiten Bildschirmen zentriert und auf maximal 900px begrenzt ist.
  4. Gib einem der Listeneinträge eine eigene Klasse (z. B. class="highlight") und style nur diesen Eintrag anders als die übrigen — z. B. mit einer anderen Hintergrundfarbe oder einem farbigen border-left.