Weswegen
Tippen, um zu suchen
    Esc zum Schließen · Sofortsuche auf der ganzen Website

    Schulprojekt-Website erstellen: Ideen, Tools & Hosting

    · Weswegen-Redaktion
    Sonstiges

    Für ein Schulprojekt eine Website zu bauen scheitert selten am Willen, sondern an drei Fragen: Welches Thema trägt genug Inhalt? Mit welchem Werkzeug fange ich an, ohne wochenlang Technik zu lernen? Und wie kommt die fertige Seite so ins Netz, dass die Lehrkraft sie über einen Link öffnen kann? Dieser Artikel beantwortet alle drei – mit konkreten Themenideen, einem ehrlichen Tool-Vergleich, einem fertigen HTML-Grundgerüst zum Kopieren und einer erprobten Veröffentlichungs-Anleitung über GitHub Pages.

    Themenideen, die genug Substanz für eine ganze Website haben

    Ein häufiger Fehler: Das Thema ist zu dünn und nach zwei Unterseiten ist alles gesagt. Wählen Sie etwas, das sich natürlich in fünf bis acht Unterseiten gliedert.

    • Projektdokumentation einer Exkursion, eines Experiments oder einer AG – mit Startseite, Ablauf, Fotostrecke, Ergebnissen und Quellen.
    • Themenportal zu einem Unterrichtsthema (z. B. lokale Geschichte, ein Autor, ein Ökosystem) – gegliedert nach Teilaspekten, so entstehen die Unterseiten fast von selbst.
    • Portfolio zu einem Hobby oder Handwerk mit Galerie, Anleitungen und einer Über-mich-Seite.
    • Kampagnenseite zu einem sozialen oder ökologischen Anliegen an der Schule – Problem, Fakten, Forderungen, Mitmach-Aufruf.
    • Klassen- oder Kurswebsite als gemeinsames Gruppenprojekt, bei der jede Person eine Unterseite verantwortet.

    Für jüngere Schülerinnen und Schüler lohnt ein leichterer Einstieg – siehe Website erstellen für Kinder.

    Das richtige Werkzeug wählen

    Die Entscheidung hängt vom Lernziel ab: Soll es schnell schick aussehen, oder sollen echte Webtechnik-Kenntnisse entstehen?

    Baukästen (Wix, Jimdo, WordPress.com)

    Baukästen liefern Vorlagen per Drag-and-drop und eine kostenlose Adresse nach dem Muster IhrName.wixsite.com/meinprojekt. Ideal, wenn das Thema und die Gestaltung im Vordergrund stehen und niemand Code schreiben will. Jimdo und WordPress.com haben deutschsprachige Oberflächen, was die Bewertung erleichtert. Grenzen: In der Gratis-Variante bleibt meist Werbung des Anbieters sichtbar, eine eigene Domain kostet extra, und exportieren lässt sich das Projekt kaum. Für einen reinen Baukasten-Weg ohne Konto siehe eigene Website kostenlos erstellen ohne Anmeldung.

    HTML und CSS von Hand

    Wer verstehen will, wie das Web funktioniert, schreibt HTML und CSS selbst – das ist in fast jedem Informatik-Lehrplan ein Bewertungsplus. Als Editor genügt ein kostenloser Code-Editor wie VS Code oder Notepad++; zur Not tut es der Windows-Editor (eine Anleitung dazu: HTML-Website erstellen mit Notepad). Der Aufwand ist höher, aber Sie behalten volle Kontrolle und können das Ergebnis später kostenlos hosten.

    Ein minimales, valides Grundgerüst zum Kopieren:

    <!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mein Schulprojekt</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header><h1>Projekttitel</h1></header>
  <nav><a href="index.html">Start</a> · <a href="thema.html">Thema</a></nav>
  <main>
    <p>Hier steht der Inhalt.</p>
  </main>
  <footer><p>Schulprojekt 2026</p></footer>
</body>
</html>

    Zwei Zeilen sind erfahrungsgemäß entscheidend: <meta charset="utf-8"> verhindert, dass Umlaute als „ä” erscheinen, und die viewport-Zeile sorgt dafür, dass die Seite auf dem Handy nicht winzig dargestellt wird.

    Gestaltung: aufgeräumt schlägt überladen

    Eine schlichte, konsistente Seite wird besser bewertet als eine bunte mit fünf Schriftarten. Praktische Regeln:

    • Zwei bis drei Farben genügen. Legen Sie sie in der CSS-Datei zentral fest, etwa mit CSS-Variablen (:root { --akzent: #2a6; }), dann bleibt alles einheitlich.
    • Eine, maximal zwei Schriftarten, gut lesbar, mindestens 16 px Fließtext.
    • Responsiv heißt: Auf dem Smartphone bleibt alles lesbar. Mit CSS Flexbox (display: flex; flex-wrap: wrap;) ordnen sich Elemente automatisch um. Testen Sie das mit F12 im Browser über die Geräteansicht.

    Bilder rechtlich sauber einbinden

    Bilder einfach aus der Google-Suche zu kopieren ist eine Urheberrechtsverletzung – bei einer öffentlich erreichbaren Website ein echtes Risiko. Nutzen Sie stattdessen:

    • Unsplash, Pexels, Pixabay – kostenlose Fotos, für die meisten Zwecke ohne Namensnennung nutzbar (Lizenz je Bild kurz prüfen).
    • Wikimedia Commons – oft unter Creative Commons; hier ist eine Quellenangabe mit Autor und Lizenz Pflicht.
    • Eigene Fotos – rechtlich am unkompliziertesten; achten Sie nur darauf, keine abgebildeten Personen ungefragt zu zeigen.

    Notieren Sie Quelle und Lizenz jedes Bildes in einer Liste – das gehört bei einem Schulprojekt ohnehin zur Dokumentation.

    Die Website veröffentlichen – kostenlos mit GitHub Pages

    Für selbst geschriebene HTML-Seiten ist GitHub Pages der zuverlässigste Gratis-Weg. So funktioniert es:

    1. Kostenloses Konto auf github.com anlegen.
    2. Ein neues Repository erstellen (Button „New”), z. B. schulprojekt, und auf „Public” stellen.
    3. Ihre Dateien hochladen – index.html und style.css per „Add file” → „Upload files” in den Hauptordner ziehen und mit „Commit changes” bestätigen.
    4. Unter Settings → Pages bei „Branch” den Zweig main und den Ordner / (root) wählen, dann „Save”.
    5. Nach ein bis zwei Minuten erscheint oben die Adresse, meist https://IhrName.github.io/schulprojekt/.

    Eine gute Alternative ist Netlify Drop (app.netlify.com/drop): Ziehen Sie den kompletten Projektordner auf die Drop-Fläche, und Sie erhalten in Sekunden eine Live-Adresse. Zum dauerhaften Behalten der Seite ist ein kostenloses Konto nötig, für einen schnellen Test genügt der reine Drop.

    Typische Fehler beim Veröffentlichen und ihre Lösung

    • Seite zeigt nur „404”. Die Startdatei muss exakt index.html heißen (klein geschrieben) und im gewählten Ordner liegen. GitHub unterscheidet Groß- und Kleinschreibung.
    • CSS lädt nicht. Der Pfad im <link>-Tag muss zur echten Dateibenennung passen: style.css und Style.css sind auf dem Server nicht dasselbe.
    • Änderungen erscheinen nicht. GitHub Pages braucht einen Moment; oft hilft ein hartes Neuladen mit Strg + F5, um den Browser-Cache zu umgehen.
    • Umlaute sind kaputt. Fehlt <meta charset="utf-8">, werden ä/ö/ü falsch dargestellt.

    Bewertung sichern: dokumentieren und präsentieren

    Der Website-Link allein ist selten die ganze Note. Halten Sie den Arbeitsweg fest: Wer hat was übernommen, welche Quellen wurden genutzt, welche Probleme gab es und wie wurden sie gelöst. Für die Präsentation reicht der geteilte Link plus eine kurze Demo der wichtigsten Unterseiten. Bei Gruppenarbeit klären Sie früh die Rollen (Inhalt, Design, Technik/Veröffentlichung), damit am Abgabetag nicht eine Person alles trägt.

    FAQ

    Braucht man Programmierkenntnisse für eine Schulprojekt-Website? Nein. Mit einem Baukasten wie Jimdo oder Wix kommen Sie ganz ohne Code aus. HTML und CSS lohnen sich aber, wenn Informatik-Kompetenz Teil der Bewertung ist – die Grundlagen sind an einem Nachmittag machbar.

    Kostet das Veröffentlichen etwas? Nein. GitHub Pages und Netlify hosten statische Seiten dauerhaft kostenlos, Baukästen bieten Gratis-Tarife mit Anbieter-Subdomain. Geld kostet nur eine eigene Wunschdomain (etwa meinprojekt.de), die für ein Schulprojekt in der Regel nicht nötig ist.

    Braucht eine Schulprojekt-Website ein Impressum? Rein schulinterne, nicht-kommerzielle Projekte fallen üblicherweise nicht unter die Impressumspflicht. Sobald die Seite öffentlich erreichbar ist, sollten Sie das mit der Lehrkraft abstimmen und personenbezogene Daten sparsam einsetzen.