Wie Sie mit Ihrem Kind eine einfache Website nur mit einem Texteditor erstellen

Eine Schritt-für-Schritt-Anleitung zum Erstellen einer ersten Website mit HTML und CSS für Familien.

  1. Was Sie benötigen. Für dieses Projekt brauchen Sie nur wenige Dinge: Einen Computer mit einem einfachen Texteditor (wie Notepad auf Windows oder TextEdit auf Mac), einen Internetbrowser und eine Idee für Ihre Website. Das kann eine Familienseite, eine Seite über ein Hobby oder ein kleines Projekt Ihrer Kinder sein. Erstellen Sie einen neuen Ordner auf dem Desktop mit dem Namen 'Unsere-Website' – hier werden alle Dateien gespeichert.
  2. Die erste HTML-Datei erstellen. Öffnen Sie Ihren Texteditor und erstellen Sie eine neue, leere Datei. Geben Sie folgende Grundstruktur ein: Beginnen Sie mit '<!DOCTYPE html>', gefolgt von '<html>' und '<head>'. Im Head-Bereich fügen Sie '<title>Unsere Familie</title>' ein und schließen mit '</head>'. Dann öffnen Sie den Body-Bereich mit '<body>' und schreiben 'Willkommen auf unserer Familienwebsite!' hinein. Schließen Sie mit '</body>' und '</html>'. Speichern Sie die Datei als 'index.html' in Ihrem Website-Ordner. Achten Sie darauf, dass die Endung wirklich .html ist.
  3. Inhalte hinzufügen. Jetzt können Sie Ihre Website mit Leben füllen. Überschriften erstellen Sie mit '<h1>Große Überschrift</h1>' oder '<h2>Kleinere Überschrift</h2>'. Normale Texte stehen zwischen '<p>' und '</p>'. Für eine Liste verwenden Sie '<ul>' für den Anfang, dann jedes Listenelement zwischen '<li>' und '</li>', und schließen mit '</ul>'. Lassen Sie Ihre Kinder entscheiden, was auf die Seite soll – vielleicht Informationen über Haustiere, Lieblingsbücher oder besondere Familienerlebnisse.
  4. Die Website schöner gestalten. Um Ihre Website bunter zu machen, erstellen Sie eine neue Datei namens 'style.css'. Hier können Sie Farben und Schriftarten festlegen. Schreiben Sie zum Beispiel 'body { background-color: lightblue; font-family: Arial; }' für einen hellblauen Hintergrund. Überschriften können Sie mit 'h1 { color: darkblue; }' dunkelblau färben. Verknüpfen Sie die CSS-Datei mit Ihrer HTML-Datei, indem Sie im Head-Bereich '<link rel="stylesheet" href="style.css">' einfügen.
  5. Die Website testen und erweitern. Öffnen Sie Ihre index.html-Datei mit einem Doppelklick – sie sollte sich in Ihrem Browser öffnen. Experimentieren Sie gemeinsam mit verschiedenen Farben, Schriftgrößen und neuen Inhalten. Sie können weitere Seiten erstellen, indem Sie neue HTML-Dateien anlegen und diese mit Links verbinden: '<a href="seite2.html">Zu Seite 2</a>'. Lassen Sie Ihrer Kreativität freien Lauf und probieren Sie verschiedene Gestaltungsmöglichkeiten aus.