HTML & externes CSS

Klasse 3B  ·  IKT HAK digital  ·  Profiliga

📁 So sieht euer Projektordner aus

Alle Dateien müssen im selben Ordner liegen – sonst findet der Browser das CSS nicht! Legt zuerst einen Ordner an (z.B. mein-projekt) und erstellt dann darin diese Dateien:

📁 mein-projekt/
    📄 index.html  ← Startseite (IMMER so benennen!)
    📄 seite1.html  ← Unterseite 1
    📄 seite2.html  ← Unterseite 2
    📄 seite3.html  ← Unterseite 3
    📄 style.css  ← Das externe CSS – gilt für ALLE!
    📁 bilder/  ← Unterordner für alle Bilder
        🖼️ bild1.jpg
        🖼️ bild2.png

🏗️ Das Grundgerüst – steht auf JEDER Seite

Jede eurer HTML-Dateien beginnt mit demselben Grundgerüst. Kopiert es und ändert nur den Titel und den Inhalt! 

<!-- Diese erste Zeile sagt: Das ist ein HTML-Dokument -->
<!DOCTYPE html>
<html lang="de">

<head>
  <!-- Zeichensatz: damit ä, ö, ü richtig angezeigt werden -->
  <meta charset="UTF-8" />

  <!-- Viewport: damit die Seite am Handy richtig aussieht -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- Seitentitel: erscheint im Browser-Tab -->
  <title>Euer Titel hier</title>

  <!-- Das externe CSS einbinden – PFLICHT auf jeder Seite! -->
  <link rel="stylesheet" href="style.css" />
</head>

<body>

  <!-- Hier kommt euer Inhalt rein -->

</body>
</html>

⬇️ Dieses Grundgerüst könnt ihr auch als Datei herunterladen – schaut auf Seite 3 (Schritt-für-Schritt)!

📐 Die vier Bereiche eurer Seite

Jede eurer HTML-Seiten hat denselben Aufbau – vier klar getrennte Bereiche: 

<body>

  <header>
    <!-- Logo, Titel -->
  </header>

  <nav>
    <!-- Links zu euren Seiten -->
  </nav>

  <main>
    <!-- Euer gesamter Inhalt -->
  </main>

  <footer>
    <!-- Name, Quellen -->
  </footer>

</body>

🔗 Die Navigation – so verlinkt ihr eure Seiten

Die Navigation funktioniert mit <a href="...">-Tags. Das Attribut href gibt an, welche Datei geöffnet werden soll. Da alle eure Dateien im selben Ordner sind, reicht der Dateiname! 

<nav>
  <!-- class="aktiv" → diese Seite ist gerade geöffnet -->
  <a href="index.html" class="aktiv">Startseite</a>

  <a href="seite1.html">Seite 1</a>
  <a href="seite2.html">Seite 2</a>
  <a href="seite3.html">Seite 3</a>
</nav>

⚠️ Wichtig: Auf jeder Seite wechselt class="aktiv" zum jeweils aktuellen Link. So sehen Besucher, wo sie gerade sind.

🔗 Der Footer – so verlinkt ihr Impressum & Datenschutz

Der <footer> steht am Ende jeder HTML-Seite. Hier kommen euer Name, eure Quellen – und die Pflichtlinks zu Impressum und Datenschutz.

Einen Link im Footer erstellt ihr genau wie jeden anderen Link – mit dem <a href="...">-Tag. Da Impressum und Datenschutz im selben Ordner liegen, reicht der Dateiname als Ziel: 

<footer>

  <!-- ZEILE 1: Euer Name ↓↓↓ "Vorname Nachname" durch euren Namen ersetzen -->
  <p>
    Erstellt von: <strong>Vorname Nachname</strong> &nbsp;|&nbsp;
    Klasse 3B &nbsp;|&nbsp; IKT – HAK digital &nbsp;|&nbsp; 2025
  </p>

  <!-- ZEILE 2: Quellen ↓↓↓ eure echten Quellen eintragen -->
  <p>
    Quellen:
    <a href="https://www.quelle1.at" target="_blank">Name der Quelle</a>
  </p>

  <!-- ZEILE 3: Impressum & Datenschutz – NICHT LÖSCHEN! -->
  <p>
    <a href="impressum.html">Impressum</a>
    &nbsp;|&nbsp;
    <a href="datenschutz.html">Datenschutz</a>
  </p>

</footer>

Erstellt von: Maxima Mustermann | Klasse 3B | IKT – HAK digital | 2025
Quellen: Wikipedia, National Geographic
Impressum  |  Datenschutz

▲ So sieht euer fertiger Footer aus

⚠️ Wichtig: Die Links zu impressum.html und datenschutz.html müssen auf jeder eurer Seiten im Footer stehen – kopiert den Footer-Block einfach auf alle Seiten!

💡 Warum muss die CSS-Zeile auf JEDE Seite?

HTML-Dateien sind voneinander unabhängig. Jede Seite weiß nur, was in ihr selbst steht. Wenn ihr das CSS nur in index.html einbindet, hat seite1.html kein Styling – sie sieht dann komplett kahl und unformatiert aus.

Deshalb muss diese Zeile auf jeder einzelnen HTML-Datei stehen: 

<link rel="stylesheet" href="style.css" />

Der Vorteil: Die CSS-Datei selbst existiert nur einmal. Änderungen dort wirken sich sofort auf alle Seiten aus!