Deine erste Webseite

Start

Diese Anleitung ist für Windows. Mit jedem Kapitel wächst deine eigene Seite.

Keine Sorge, du kannst nichts kaputt machen. Wenn etwas nicht klappt, ist das normal und gehört dazu. Schau genau hin, was anders ist als im Beispiel, und probier es noch einmal.

Ein Kapitel dauert ungefähr zehn bis fünfzehn Minuten. Das ist eine Schätzung und noch nicht mit Kindern gemessen. Du musst nicht alles an einem Tag machen.

Wie ein Haus

Eine Webseite ist wie ein Haus:

• HTML sind die Wände. Die baust du jetzt.
• CSS ist die Farbe und die Einrichtung. Das kommt später.
• JavaScript ist die Elektrik, damit sich etwas bewegt. Das kommt auch später.
• Die Adresse sagt, wo das Haus steht. Die bekommt es, wenn die Seite online ist.

Das brauchst du

• Einen Editor, ein einfaches Schreibprogramm. Auf Windows ist Notepad schon da: Startmenü öffnen, Notepad tippen, Enter drücken.
• Einen Browser, zum Beispiel Edge, Chrome oder Firefox.

Mehr nicht. Es kostet nichts, und du musst nichts installieren.

Dein Thema

Überlege dir, worüber deine Seite sein soll. Zum Beispiel über dein Haustier, dein Hobby oder dein Lieblingsspiel. In den Beispielen heisst die Seite George, meine Katze. Nimm dein eigenes Thema und ersetze «George» überall.

Die Kapitel

0. Unter die Haube: Du schaust hinter die Kulissen einer Seite.
1. Hallo Welt: Deine erste Datei, die ein Browser lesen kann.
2. Texte und Bilder: Mehr Text, ein Bild und ein aufgeräumter Ordner.
3. Links: Eine zweite Seite und Wege dazwischen.
4. Listen und Tabellen: Ordnung in deine Inhalte.
5. Menü: Eine Leiste, die alle Seiten verbindet.
6. Zeigen und Testen: Wie sieht deine Seite auf anderen Geräten aus?
7. Online: Ein Ausblick, wie eine Seite ins Internet kommt, mit deinen Eltern.

Lange Zeilen im Beispielcode kannst du seitlich wischen oder scrollen. Schreib alles selbst ab. Das ist die beste Übung. Ein Tippfehler macht nichts kaputt und zeigt dir, worauf es ankommt.

Kapitel 0: Unter die Haube

Bevor du etwas baust, schaust du hinter die Kulissen. Jede Webseite besteht aus Text, den dein Browser liest und in eine Seite verwandelt. Diesen Text kannst du ansehen und sogar verändern, aber nur auf deinem eigenen Bildschirm.

Keine Sorge, du kannst nichts kaputt machen. Du veränderst nur deine eigene Ansicht, nie die echte Seite. Ein Neuladen mit F5 stellt alles wieder her.

Schritt 1: Eine Seite öffnen

Öffne deinen Browser und gib oben in die Adresszeile example.org ein. Das ist eine Seite, die extra für Beispiele da ist. Du siehst eine kurze Seite mit einer Überschrift.

Schritt 2: Unter die Haube schauen

Drücke F12. Am Rand öffnet sich ein neuer Bereich voller Text mit spitzen Klammern. Das sind die Tags, die Anweisungen, aus denen die Seite gebaut ist. Du findest dort zum Beispiel <h1>. Das ist die grosse Überschrift, die du gleich selbst schreiben wirst.

Schritt 3: Einen Text verändern

Doppelklicke im neuen Bereich auf den Text zwischen <h1> und </h1>. Lösche ihn, tippe etwas Eigenes, zum Beispiel George ist der Chef, und drücke Enter. Schau auf die Seite: Die Überschrift hat sich verändert.

Schritt 4: Alles wieder zurück

Drücke F5. Die Seite lädt neu, und alles ist wieder wie vorher. Du hast nur deine eigene Ansicht verändert. Die echte Seite hat sich nie verändert.

Kapitel 1: Hallo Welt

Schritt 1: Dein Ordner

Mach auf dem Computer einen neuen Ordner. Nenn ihn wie dein Thema, zum Beispiel george. Hier wohnt deine Seite.

Schritt 2: Deine Datei

Öffne den Editor und wähle Datei, Speichern unter. Unten steht «Dateityp». Öffne das Menü und wähle «Alle Dateien (*.*)». Wenn dort «Textdateien (*.txt)» steht, hängt der Editor von sich aus .txt an den Namen.

Nenn die Datei ganz genau index und speichere sie in deinem Ordner. Nur index, sonst nichts. Später machen wir daraus eine HTML-Datei.

Schritt 3: Dein Text

Tippe das ab, Zeile für Zeile:

index<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>George, meine Katze</title>
</head>
<body>
  <h1>Hallo Welt!</h1>
  <p>Das ist meine erste Seite.</p>
</body>
</html>

Tippe jede Zeile selbst ab. Ein fehlendes < oder > reicht, damit etwas anders aussieht. Das passiert allen, und genau so lernt man.

Zwischen <body> und </body> steht das, was man sieht. <h1> ist die grosse Überschrift (Heading 1), </h1> beendet sie. <p> ist ein Absatz (Paragraph).

Die Zeile <meta charset="UTF-8"> sagt dem Browser, wie er Sonderzeichen wie ä, ö und ü lesen soll. Ohne sie können sie falsch aussehen, zum Beispiel als Zeichensalat. Wir lassen sie deshalb immer drin.

Speichere die Datei. Auch jetzt gilt: Dateityp «Alle Dateien», Name index.

Schritt 4: Aus dem Zettel wird ein Bauplan

Bisher ist deine Datei ein Zettel: Es steht nur roher Text drauf, ohne Farben, Schriftgrössen oder Bilder. Eine HTML-Datei ist dieselbe Textdatei, aber der Computer erkennt sie an der Endung .html und öffnet sie nicht mit dem Editor, sondern mit dem Browser. Der Browser liest die Tags, blendet sie aus und zeichnet die fertige Seite.

1. Endungen sichtbar machen. Öffne deinen Ordner im Explorer. Geh auf Ansicht und schalte «Dateinamenerweiterungen» ein. Windows blendet Endungen sonst oft aus.
2. Prüfen. Deine Datei muss jetzt genau index heissen, ohne etwas dahinter. Steht dort index.txt, hast du beim Speichern «Textdateien» gewählt. Das ist kein Problem: Du ersetzt im nächsten Schritt den ganzen Namen.
3. Umbenennen. Rechtsklick auf die Datei, Umbenennen, tippe index.html. Der Computer fragt, ob du die Endung wirklich ändern willst. Antworte mit Ja.
4. Doppelklick. Der Browser öffnet sich und zeigt deine Seite. Das ist deine erste eigene Webseite.

Kapitel 2: Texte und Bilder

In diesem Kapitel bekommt deine Seite mehr Text und ein Bild. Keine Sorge, du kannst nichts kaputt machen. Wenn dein Bild nicht erscheint, ist das die beste Übung dieses Kapitels.

Schritt 1: Datei zum Bearbeiten öffnen

Ein Doppelklick öffnet index.html jetzt im Browser, nicht im Editor. Zum Bearbeiten: Rechtsklick auf die Datei, Öffnen mit, Editor.

Schritt 2: Unterordner und Bild

Rechtsklick im Ordner, Neu, Ordner, nenn ihn bilder. Kopiere dein Bild dort hinein. Nenn es einfach und ohne Leerzeichen, zum Beispiel george.jpg.

So bleibt alles auffindbar:

1. Alles klein schreiben.
2. Keine Leerzeichen, stattdessen Bindestrich (george-sofa.jpg).
3. Keine Umlaute oder Sonderzeichen im Dateinamen.
4. Sprechende Namen, nicht IMG_4821.jpg.

Schritt 3: Text und Bild einfügen

Tippe das zwischen <body> und </body> ab, unter deine Überschrift:

index.html<h2>Über George</h2>
<p>George ist eine Katze. Sie schläft <strong>gern</strong> auf dem Sofa.</p>
<img src="bilder/george.jpg" alt="George liegt auf dem Sofa">

• <h2> ist eine kleinere Überschrift als <h1>. Es gibt sie bis <h6>. Pro Seite gibt es nur eine <h1>.
• <strong> macht ein Wort fett.
• <img> steht für image (Bild) und hat kein Ende-Tag.
• src sagt, wo das Bild liegt: bilder/ ist der Ordner, george.jpg die Datei. Das nennt man den Pfad, den Weg zur Datei.
• alt beschreibt das Bild mit Worten. Es wird gezeigt oder vorgelesen, wenn das Bild fehlt oder jemand es nicht sehen kann.

Schritt 4: Speichern und ansehen

Speichere (Dateityp «Alle Dateien», Name index.html) und lade die Seite im Browser neu (Taste F5). Dein Bild erscheint.

So sieht dein Ordner jetzt aus

Ordnergeorge/
├── index.html
└── bilder/
    └── george.jpg

Kapitel 3: Links

Bis jetzt hat deine Seite eine Startseite. Jetzt bekommt sie eine zweite Seite, und ein Klick führt von der einen zur anderen. Keine Sorge, du kannst nichts kaputt machen. Wenn ein Link nicht klappt, ist das die beste Übung dieses Kapitels.

Schritt 1: Die zweite Seite

Öffne den Editor, wähle Datei, Speichern unter, den Dateityp «Alle Dateien» und nenn die Datei spielzeug.html. Speichere sie im selben Ordner wie index.html.

Tippe den Rahmen wieder ab, wie in Kapitel 1. Das ist die beste Übung. Wenn es schnell gehen soll, darfst du ihn auch kopieren: In index.html alles markieren (Strg und A), kopieren (Strg und C), in der neuen Datei einfügen (Strg und V). Dann änderst du Titel, Überschrift und Text. Tipp: Tippe den Rahmen mindestens einmal selbst, dann weisst du, was darin steht.

spielzeug.html<h1>Georges Spielzeug</h1>
<p>Am liebsten spielt George mit dem roten Ball.</p>

Schritt 2: Der Link von der Startseite

Öffne index.html (Rechtsklick, Öffnen mit, Editor) und tippe unter den Text:

index.html<p><a href="spielzeug.html">Georges Spielzeug</a></p>

<a> steht für anchor (Anker). href ist das Ziel, der Weg zur Datei, wie bei den Bildern. Der Text dazwischen ist das, worauf man klickt.

Schritt 3: Der Rückweg

In spielzeug.html kommt der Link zurück:

spielzeug.html<p><a href="index.html">Zurück zur Startseite</a></p>

Schritt 4: Klicken

Speichere beide Dateien und öffne index.html im Browser. Klicke auf den Link. Du landest auf deiner eigenen zweiten Seite und kommst mit dem Rückweg wieder zurück. Das ist dein eigenes kleines Web.

Ein Link zu einer anderen Webseite

Mit https:// und einer Adresse führt ein Link auch ins Internet:

index.html<p><a href="https://example.org">Eine Beispielseite</a></p>

example.org ist eine Seite, die extra für Beispiele da ist und nichts Unerwartetes zeigt.

So sieht dein Ordner jetzt aus

Ordnergeorge/
├── index.html
├── spielzeug.html
└── bilder/
    └── george.jpg

Kapitel 4: Listen und Tabellen

Jetzt bekommen deine Inhalte Ordnung: eine Liste mit Punkten, eine Rangliste mit Nummern und eine Tabelle. Keine Sorge, du kannst nichts kaputt machen. Wenn etwas komisch aussieht, fehlt meistens nur ein Ende-Tag, und das findest du.

Öffne die Dateien zum Bearbeiten wie bisher: Rechtsklick, Öffnen mit, Editor. Speichern mit dem Dateityp «Alle Dateien».

Schritt 1: Eine Liste mit Punkten

Tippe in index.html unter den Text über George:

index.html<h2>Georges Lieblingsplätze</h2>
<ul>
  <li>das Sofa</li>
  <li>der Balkon</li>
  <li>die Fensterbank</li>
</ul>

<ul> ist eine Liste ohne Reihenfolge (unordered list). <li> ist ein einzelner Punkt (list item).

Schritt 2: Eine Rangliste

Wenn die Reihenfolge wichtig ist, nimmst du eine nummerierte Liste. Tippe in spielzeug.html unter den Text:

spielzeug.html<h2>Georges Spielzeug-Rangliste</h2>
<ol>
  <li>der rote Ball</li>
  <li>die Stoffmaus</li>
  <li>der Karton</li>
</ol>

<ol> ist eine Liste mit Nummern (ordered list). Merke: Ist die Reihenfolge wichtig, nimmst du ol. Ist sie egal, nimmst du ul.

Schritt 3: Eine Tabelle

Tippe in index.html unter die Liste einen Steckbrief:

index.html<h2>Steckbrief</h2>
<table border="1">
  <tr>
    <th>Name</th>
    <td>George</td>
  </tr>
  <tr>
    <th>Art</th>
    <td>Katze</td>
  </tr>
  <tr>
    <th>Lieblingsplatz</th>
    <td>das Sofa</td>
  </tr>
</table>

• <table> ist die ganze Tabelle.
• <tr> ist eine Zeile (table row).
• <th> ist eine Überschrift in der Tabelle (table header).
• <td> ist ein Feld mit Inhalt (table data).
• border="1" zeichnet dünne Linien, damit du die Felder siehst. Später machen wir das mit CSS schöner.

Schritt 4: Ansehen

Speichere beide Dateien und lade die Seiten im Browser neu (F5). Aus ein paar Zeilen Text ist eine ordentliche Tabelle geworden.

Kapitel 5: Menü

Bis jetzt kommst du von Seite zu Seite über einzelne Links. Echte Webseiten haben ein Menü, das auf jeder Seite gleich ist. Das baust du jetzt. Keine Sorge, du kannst nichts kaputt machen. Das Menü besteht nur aus Links, die du schon kennst.

Schritt 1: Eine dritte Seite

Damit das Menü etwas verbindet, braucht es eine dritte Seite. Speichere eine neue Datei tagebuch.html im selben Ordner (Dateityp «Alle Dateien»). Tippe den Rahmen wieder ab oder kopiere ihn aus einer anderen Seite. Dazwischen steht:

tagebuch.html<h1>Georges Tagebuch</h1>
<p>Heute habe ich lange auf dem Sofa geschlafen.</p>
<p>Am Nachmittag habe ich den roten Ball gejagt.</p>

Schritt 2: Das Menü

Tippe in index.html direkt unter <body>, noch vor die Überschrift:

index.html<nav>
  <ul>
    <li><a href="index.html">Start</a></li>
    <li><a href="spielzeug.html">Spielzeug</a></li>
    <li><a href="tagebuch.html">Tagebuch</a></li>
  </ul>
</nav>

<nav> kommt von navigation. Es sagt dem Browser: «Das hier ist das Menü.» Darin steht eine Liste, und jeder Punkt ist ein Link, wie in Kapitel 3. Im Moment sieht es noch wie eine Liste mit Punkten aus. Mit CSS wird später eine Leiste daraus.

Schritt 3: Auf jede Seite

Ein Menü ist nur gut, wenn es auf jeder Seite steht. Kopiere es (Strg und C) und füge es in spielzeug.html und tagebuch.html direkt unter <body> ein (Strg und V). Das Kopieren ist hier ganz normal, so machen es auch Profis. Deine alten «Zurück»-Links brauchst du nicht mehr, du kannst sie löschen.

Schritt 4: Klicken

Öffne index.html im Browser und klicke dich durch alle drei Seiten. Von jeder Seite kommst du überall hin. Deine Seiten wirken jetzt wie eine richtige Webseite.

So sieht dein Ordner jetzt aus

Ordnergeorge/
├── index.html
├── spielzeug.html
├── tagebuch.html
└── bilder/
    └── george.jpg

Kapitel 6: Zeigen und Testen

Du hast deine Seite gebaut und willst sie zeigen. Genau jetzt lohnt sich ein genauer Blick: Wie sieht sie auf anderen Geräten aus? Keine Sorge, wenn sie dort anders aussieht. Das ist normal, und du lernst gleich, warum.

Schritt 1: Die Seite auf dem Handy ansehen

Du musst dafür kein Handy holen. Öffne deine Seite im Browser und drücke F12, wie in Kapitel 0. Klicke in der Leiste auf das Symbol mit Handy und Tablet (die Geräteansicht) und wähle oben «Handy». Was siehst du? Der Text ist winzig. Warum?

Die Antwort: Geräte haben unterschiedliche Formate

Das Format ist die Grösse und die Form des Bildschirms. Ein Handy ist schmal und hoch, ein Tablet ist mittelbreit, ein Laptop oder PC ist breit und liegt quer. Als Beispiel in Pixeln (Bildpunkten): Ein Handy ist etwa 400 Pixel breit, ein Tablet etwa 800, ein PC über 1000. Das sind nur Beispiele. Echte Geräte können davon abweichen.

Dein Browser weiss nicht von selbst, dass deine Seite auch schmal sein darf. Ein Handy nimmt deshalb an, sie brauche viel Platz (etwa 980 Pixel), und verkleinert alles, bis es auf den schmalen Bildschirm passt. Darum wirkt der Text winzig.

Schritt 2: Dem Handy sagen, was du willst

Das Sichtfenster heisst auf Englisch viewport. Wir sagen dem Handy: «Nimm deine echte Breite.» Tippe diese Zeile in den <head>, direkt unter die Zeile mit charset, und das auf jeder Seite:

index.html<meta name="viewport" content="width=device-width, initial-scale=1.0">

Speichere (Dateityp «Alle Dateien», Name index.html) und lade die Seite neu (F5). Schau dir wieder die Handy-Ansicht an. Der Text ist gross und passt auf den Bildschirm.

Kapitel 7: Online (Ausblick)

Bisher sieht nur ihr deine Seite, auf eurem Computer. In diesem Kapitel baust du nichts. Du erfährst, wie eine Seite ins Internet kommt, und du entscheidest das zusammen mit deinen Eltern.

Zwei Wege, zwei Namen

• Gratis-Adresse: Es kostet nichts, aber die Adresse gehört dem Anbieter und sieht aus wie deinname.anbieter.irgendwas. Ein Beispiel für so einen Dienst ist GitHub Pages. Solche Gratis-Angebote können Grenzen und Bedingungen haben.
• Eigene Domain: Das ist eine Adresse wie deinname.ch, die dir gehört. Sie kostet in der Regel jedes Jahr etwas. Wie viel, solltet ihr vor dem Kauf bei einem Anbieter nachsehen.

Für den Anfang reicht eine Gratis-Adresse. Wenn die Seite zuverlässig laufen soll, kann sich später etwas Bezahltes lohnen.

Was heisst «im Internet»?

Wenn deine Seite online ist, kann sie jeder sehen, der die Adresse kennt. Und was einmal im Internet war, kann dort bleiben. Darum gilt die Regel für alles, was auf deiner Seite steht:

• Kein voller Name.
• Keine Adresse und keine Schule.
• Keine Fotos von Personen, auch nicht von dir.
• Tiere, Gegenstände, eigene Zeichnungen und eigene Texte zu deinem Thema sind der sichere Anfang.