Deine erste eigene Datei

Bis hier hast du alles im Browser geschrieben. Jetzt der Schritt hinaus: eine echte Datei auf deinem Rechner, die du im Browser öffnest.

01 / 05Ein Editor

Zum Schreiben von HTML reicht theoretisch jeder Texteditor. Praktisch nimmt man einen Code-Editor, weil er Farben, Einrückung und Autovervollständigung mitbringt. Verbreitet und kostenlos ist Visual Studio Code.

Zwei Erweiterungen lohnen sich sofort: eine, die Fehler im Markup markiert, und Live Server. Letztere startet einen kleinen Webserver und lädt die Seite bei jedem Speichern neu. Das ist ungefähr das, was du hier im Kurs die ganze Zeit hattest.

Eine Kleinigkeit, die viel spart: Tippst du in VS Code ein Ausrufezeichen und drückst Tab, legt der Editor das komplette Grundgerüst an. Du musst es also nie wieder abtippen.

02 / 05index.html

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mein Kochblog</title>
    <meta name="description" content="Rezepte, die unter der Woche klappen.">
    <link rel="icon" href="favicon.svg" type="image/svg+xml">
    <link rel="stylesheet" href="stil.css">
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="index.html">Start</a></li>
          <li><a href="rezepte/linsensuppe.html">Linsensuppe</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <h1>Mein Kochblog</h1>
      <p>Rezepte, die auch unter der Woche klappen.</p>
    </main>

    <footer>
      <p>Alle Rechte vorbehalten</p>
    </footer>
  </body>
</html>

Leg einen Ordner an, zum Beispiel kochblog, und darin eine Datei namens index.html. Genau dieser Name, klein geschrieben.

Der Grund: Webserver liefern bei einer Adresse ohne Dateinamen automatisch die index.html aus. Ruft jemand deine-seite.de auf, bekommt er index.html. Heißt deine Startseite Startseite.html, ist sie nur erreichbar, wenn man den Namen in der Adresse mitschreibt.

Öffnen kannst du die Datei per Doppelklick, dann steht in der Adresszeile ein file:///-Pfad. Das funktioniert für die ersten Schritte. Mit Live Server bekommst du stattdessen eine echte Adresse und das automatische Neuladen. Nimm den Weg, sobald du absolute Pfade (siehe unten) oder mehrere Unterseiten hast.

03 / 05Ordnung im Ordner

Ein kleines Projekt sieht typischerweise so aus: index.html liegt oben, daneben stil.css, dazu ein Ordner bilder/ und ein Ordner rezepte/ für die Unterseiten. Bei zehn Dateien ist das noch Geschmackssache, bei fünfzig entscheidet es darüber, ob du dich zurechtfindest.

Für die Namen gelten dieselben Regeln wie in der Pfad-Lektion, und sie sind hier keine Förmlichkeit:

• Klein schreiben. Dein Rechner unterscheidet vielleicht nicht zwischen Teller.jpg und teller.jpg, der Server tut es.
• Keine Umlaute, kein ß. gruesse.html statt grüße.html.
• Keine Leerzeichen. Nimm Bindestriche: linsensuppe-mit-speck.html.

Wer das von Anfang an einhält, erlebt den Klassiker nicht: Lokal ist alles gut, online fehlt die Hälfte.

04 / 05Pfade aus einer Unterseite

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Linsensuppe | Mein Kochblog</title>
    <link rel="stylesheet" href="../stil.css">
  </head>
  <body>
    <p><a href="../index.html">Zurück zur Startseite</a></p>

    <h1>Linsensuppe</h1>
    <img src="../bilder/teller.jpg" alt="Ein Teller Linsensuppe" width="600" height="338">
  </body>
</html>

Sobald Unterordner dazukommen, wird die Pfad-Lektion praktisch. Diese Datei liegt in rezepte/, deshalb geht es mit ../ eine Ebene hoch: zum Stylesheet, zur Startseite und in den Bilder-Ordner. Auf der Seite lädt das Bild nicht, denn diese Ordner gibt es hier nicht. Auf deinem Rechner, mit dem Aufbau von oben, findet der Browser es.

Der Reiter „Netzwerk“ zeigt dabei genau das, was passiert ist: Der Browser hat /bilder/teller.jpg wirklich angefragt und die Antwort war nichts, deshalb steht dort „fehlgeschlagen“. Ein kaputter Pfad ist also kein Schweigen, sondern eine Zeile. Merk dir die Stelle, sie ist später dein schnellster Weg zu einem Tippfehler im src.

Ein häufiger Stolperstein dabei: Beim Verschieben einer Datei in einen anderen Ordner stimmen alle relativen Pfade darin nicht mehr. Wer viele Unterseiten hat, ist mit absoluten Pfaden ab der Wurzel (/stil.css) meist besser bedient. Die funktionieren allerdings nur über einen Webserver, nicht per Doppelklick auf die Datei. Noch ein Grund für Live Server.

05 / 05Und dann?

Die Seite liegt jetzt auf deinem Rechner. Ins Netz kommt sie über einen Hoster, zu dem du die Dateien hochlädst. Das ist ein eigenes Thema und gehört nicht mehr zu HTML. Für den Moment reicht: Was lokal funktioniert und saubere Pfade hat, funktioniert dort genauso.