index.html anlegenWir beginnen unser Projekt „Die vier Elemente". Am Ende des Kurses wirst du eine kleine Webseite haben, die aus fünf HTML-Dateien besteht:
index.html – die Startseite mit einer Übersicht der vier Elementefeuer.html – über das Element Feuererde.html – über das Element Erdeluft.html – über das Element Luftwasser.html – über das Element WasserIn dieser Aufgabe legst du zunächst die Startseite an.
Schritt 1: Lege einen neuen Ordner auf deinem Computer an, z. B.
vier-elemente/.
Schritt 2: Erstelle darin eine neue Datei mit dem Namen
index.html und öffne sie in einem Texteditor.
Schritt 3: Tippe das folgende Grundgerüst von Hand ab (nicht kopieren – so prägt es sich besser ein!):
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Die vier Elemente</title>
</head>
<body>
<h1>Die vier Elemente</h1>
<p>Feuer, Erde, Luft und Wasser – die vier klassischen Elemente.</p>
</body>
</html>
Schritt 4: Speichere die Datei und öffne sie im Browser (Doppelklick auf die Datei oder Drag & Drop in den Browser).
Schritt 5: Ändere den Seiteninhalt: Schreibe statt „Die vier klassischen Elemente" einen eigenen einleitenden Satz über die vier Elemente. Speichere, dann aktualisiere den Browser (Taste F5 oder ⌘R).
<!DOCTYPE html> – teilt dem Browser mit: „Das ist eine HTML5-Datei"<html lang="de"> – Wurzelelement der Seite; lang="de" gibt die Sprache an<meta charset="UTF-8"> – Zeichenkodierung; sorgt dafür, dass Umlaute (ä, ö, ü) korrekt angezeigt werden<title>…</title> – Text im Browser-Tab<body>…</body> – alles hier drin ist auf der Seite sichtbar
Ergänze im <head> eine weitere <meta>-Zeile für das Viewport,
damit die Seite auch auf Smartphones gut aussieht:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Was verändert sich dadurch (noch) sichtbar? Schau dir die Seite auf deinem Smartphone an, falls vorhanden.