Wenn du schon immer wissen wolltest, wie Webseiten funktionieren, dann ist jetzt der perfekte Moment gekommen! Mit dieser Anleitung lernst du, wie du deine erste Webseite erstellen kannst. HTML ist die Sprache, mit der alle Webseiten gebaut werden, und du wirst staunen, wie einfach es ist.
Was brauchst du für deine erste Webseite?
Bevor wir loslegen, brauchst du nur zwei einfache Dinge auf deinem Computer. Keine Sorge, du musst nichts Teures kaufen oder komplizierte Programme installieren. Alles, was du brauchst, hast du wahrscheinlich schon auf deinem Computer.
Texteditor auswählen
Ein Texteditor ist wie ein ganz einfaches Schreibprogramm, nur ohne Formatierung. Auf Windows-Computern findest du den „Editor“ oder „Notepad“. Auf Mac-Computern gibt es „TextEdit“. Diese Programme reichen völlig aus, um deine erste HTML-Seite zu erstellen.
Du kannst auch kostenlose Programme wie Notepad++ herunterladen. Diese zeigen HTML-Code in verschiedenen Farben an, was das Arbeiten leichter macht. Aber für den Anfang reicht der normale Texteditor vollkommen aus.
Browser zum Testen
Einen Browser hast du auf jeden Fall schon auf deinem Computer. Chrome, Firefox, Safari oder Edge funktionieren alle perfekt. Mit dem Browser kannst du deine HTML-Seite öffnen und schauen, wie sie aussieht.
Der Browser verwandelt deinen HTML-Code in eine richtige Webseite. Das ist wie Magie – du schreibst ein paar Zeilen Code und der Browser macht daraus eine schöne Webseite mit Text, Bildern und Links.
Grundgerüst deiner HTML-Seite erstellen
Jede HTML-Seite braucht ein festes Grundgerüst. Das ist wie beim Bauen eines Hauses – zuerst brauchst du ein solides Fundament. Dieses Grundgerüst ist bei allen Webseiten gleich und bildet die Basis für jede HTML-Seite.
HTML-Dokument anlegen
Öffne deinen Texteditor und schreibe genau diesen Code hinein. Achte darauf, dass du nichts vergisst und alles genauso schreibst:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Meine erste Webseite</title>
</head>
<body>
<h1>Willkommen auf meiner Webseite!</h1>
</body>
</html>Speichere diese Datei mit dem Namen „meine-webseite.html“ ab. Wichtig ist die Endung „.html“, damit der Computer weiß, dass es sich um eine HTML-Datei handelt.
Wichtige HTML-Tags verstehen
HTML funktioniert mit sogenannten „Tags“. Das sind Befehle in spitzen Klammern, die dem Browser sagen, was er machen soll. Jeder Tag hat einen Anfang und ein Ende.
Der <html>-Tag umschließt deine ganze Webseite. Im <head> stehen Informationen über deine Seite, die man nicht sieht. Der <body> enthält alles, was auf der Webseite zu sehen ist. Das ist das wichtigste Prinzip beim HTML-Lernen für Kinder.
Deine erste Webseite mit HTML erstellen – Schritt für Schritt
Jetzt wird es richtig spannend! Du wirst lernen, wie du Text auf deine Webseite bringst. Text ist das wichtigste Element jeder Webseite, denn damit teilst du anderen mit, was du sagen möchtest.
Titel und Überschriften hinzufügen
Überschriften helfen dabei, deine Webseite zu strukturieren. HTML hat sechs verschiedene Überschrift-Tags: <h1> ist die größte Überschrift, <h6> die kleinste. Meistens brauchst du nur <h1>, <h2> und <h3>.
<h1>Das bin ich</h1>
<h2>Meine Hobbys</h2>
<h3>Fußball spielen</h3>
<h3>Bücher lesen</h3>
<h2>Meine Lieblingstiere</h2>Mit Überschriften machst du deine Webseite übersichtlicher. Besucher können schnell erkennen, worum es in den verschiedenen Bereichen geht. Das ist ein wichtiger Schritt beim Bauen deiner HTML-Seite.
Absätze und Zeilenumbrüche
Für normalen Text verwendest du den <p>-Tag. P steht für „Paragraph“, das ist das englische Wort für Absatz. Jeder <p>-Tag macht automatisch einen Abstand zum nächsten Absatz.
<p>Hallo, ich bin Max und acht Jahre alt. Ich gehe in die zweite Klasse und lerne gerade HTML.</p>
<p>Mein Lieblingsfach in der Schule ist Mathematik. Außerdem spiele ich gerne Fußball mit meinen Freunden.</p>
<p>Diese Webseite ist mein erstes Projekt. Ich bin sehr stolz darauf!</p>Wenn du nur einen einfachen Zeilenumbruch willst, ohne Abstand, verwendest du <br />. Dieser Tag braucht kein Ende-Tag und macht einfach eine neue Zeile.
Text in HTML formatieren
Normaler schwarzer Text kann manchmal langweilig aussehen. Deshalb zeige ich dir jetzt, wie du deinen Text formatieren kannst. Mit ein paar einfachen Tags machst du wichtige Wörter fett oder kursiv.
Text fett und kursiv machen
Um Text fett zu machen, verwendest du den <strong>-Tag. Für kursiven Text nimmst du <em>. Diese Tags kannst du um einzelne Wörter oder ganze Sätze setzen.
<p>Das ist <strong>sehr wichtig</strong> für mich!</p>
<p>Mein Lieblingsbuch heißt <em>Harry Potter</em>.</p>
<p>Ich bin <strong>acht Jahre alt</strong> und lerne <em>HTML programmieren</em>.</p>Übertreibe es nicht mit der Formatierung. Wenn zu viel Text fett oder kursiv ist, verliert er seine besondere Wirkung. Verwende diese Tags nur für wirklich wichtige Wörter oder Sätze.
Listen erstellen
Listen sind super praktisch, um mehrere Dinge aufzuzählen. Es gibt nummerierte Listen mit <ol> und Listen mit Punkten mit <ul>. Jeder Listenpunkt bekommt den <li>-Tag.
<h2>Meine Lieblings-Hobbys:</h2>
<ul>
<li>Fußball spielen</li>
<li>Mit Freunden treffen</li>
<li>Computerspiele spielen</li>
<li>Bücher lesen</li>
</ul>
<h2>Meine Lieblingsfächer in der Schule:</h2>
<ol>
<li>Mathematik</li>
<li>Sport</li>
<li>Deutsch</li>
</ol>Listen machen deine Webseite übersichtlicher. Besucher können auf einen Blick erkennen, welche Punkte zusammengehören. Das ist ein wichtiger Teil beim Formatieren von Text in HTML.
Bilder einfügen HTML
Eine Webseite nur mit Text wäre ziemlich langweilig. Bilder machen deine Seite viel interessanter und schöner. Das Einfügen von Bildern ist einfacher, als du denkst.
Bilder von deinem Computer verwenden
Um Bilder einfügen HTML zu können, verwendest du den <img>-Tag. Dieser Tag braucht kein Ende-Tag. Du musst ihm nur sagen, wo sich das Bild auf deinem Computer befindet.
<img src="mein-foto.jpg" alt="Das bin ich">
<img src="mein-hund.png" alt="Mein Hund Bruno">
<img src="bilder/familie.jpg" alt="Meine Familie im Urlaub">Das „src“ steht für „source“, das bedeutet „Quelle“. Dort schreibst du den Namen deiner Bilddatei hinein. Achte darauf, dass das Bild im selben Ordner wie deine HTML-Datei liegt.
Alt-Text für Bilder schreiben
Der „alt“-Text ist sehr wichtig, auch wenn du ihn normalerweise nicht siehst. Er beschreibt, was auf dem Bild zu sehen ist. Das hilft Menschen, die nicht gut sehen können, und auch Suchmaschinen verstehen dadurch deine Bilder besser.
Schreibe kurze, aber genaue Beschreibungen in den Alt-Text. Statt „Bild1“ schreibst du lieber „Mein Kaninchen Hoppel frisst Karotten“. So weiß jeder, was auf dem Bild zu sehen ist.
Links zu anderen Seiten erstellen
Links sind das Besondere am Internet. Mit ihnen kannst du von einer Webseite zur anderen springen. Das Erstellen von Links ist ein wichtiger Teil beim Bauen jeder HTML-Seite.
Externe Links einfügen
Um einen Link zu einer anderen Webseite zu erstellen, verwendest du den <a>-Tag. A steht für „Anchor“, das bedeutet „Anker“. In das href-Attribut schreibst du die Adresse der anderen Webseite.
<p>Ich lerne HTML mit <a href="https://codekiste.com">CodeKiste</a>.</p>
<p>Meine Lieblings-Suchmaschine ist <a href="https://google.de">Google</a>.</p>
<p>Lustige Videos schaue ich auf <a href="https://youtube.com">YouTube</a>.</p>Der Text zwischen den <a>-Tags wird zum anklickbaren Link. Wähle beschreibende Texte für deine Links, damit Besucher wissen, wohin sie führen.
Interne Verlinkungen
Du kannst auch Links zu anderen Seiten auf deiner eigenen Webseite erstellen. Wenn du mehrere HTML-Dateien hast, kannst du sie so miteinander verbinden. Das ist besonders nützlich für größere Projekte wie ein Webseiten HTML Projekt für Kinder.
<p><a href="ueber-mich.html">Mehr über mich erfahren</a></p>
<p><a href="meine-hobbys.html">Meine Hobbys ansehen</a></p>
<p><a href="kontakt.html">Schreib mir eine Nachricht</a></p>Interne Links funktionieren genauso wie externe Links, nur dass du statt einer Internet-Adresse den Namen deiner anderen HTML-Dateien verwendest.
Deine HTML-Seite testen und speichern
Jetzt kommt der spannendste Moment – du wirst deine erste selbst erstellte Webseite im Browser ansehen! Das Testen ist ein wichtiger Teil beim HTML-Lernen, denn nur so siehst du, ob alles richtig funktioniert.
Seite im Browser öffnen
Speichere deine HTML-Datei mit der Endung „.html“. Dann gehst du zu der Datei in deinem Datei-Explorer und klickst sie doppelt an. Sie öffnet sich automatisch in deinem Standard-Browser.
Alternativ kannst du deinen Browser öffnen und die HTML-Datei per Drag-and-Drop in das Browser-Fenster ziehen. Das funktioniert mit allen gängigen Browsern wie Chrome, Firefox oder Safari.
Fehler finden und beheben
Wenn etwas nicht so aussieht, wie du es dir vorgestellt hast, keine Panik! Das passiert auch erfahrenen Programmierern ständig. Schaue in deinem HTML-Code nach häufigen Fehlern.
Vergessene Ende-Tags sind der häufigste Fehler. Jeder <p>-Tag braucht ein </p>, jeder <strong>-Tag ein </strong>. Tippfehler in Tag-Namen kommen auch oft vor – achte auf die richtige Schreibweise.
Wenn du Änderungen an deinem HTML-Code machst, speichere die Datei und lade die Seite im Browser neu. Drücke F5 oder klicke auf den Aktualisieren-Button, um die neueste Version zu sehen.
Nächste Schritte für deine Webseite
Herzlichen Glückwunsch! Du hast erfolgreich deine erste HTML-Seite erstellt. Du weißt jetzt, wie du Text formatierst, Bilder einfügst und Links erstellst. Das sind die wichtigsten Grundlagen für jede Webseite.
Deine Webseite sieht momentan noch sehr einfach aus – das ist völlig normal für den Anfang. Um sie schöner zu gestalten, lernst du später CSS. Damit kannst du Farben ändern, Schriften anpassen und das Layout verbessern.
Experimentiere ruhig weiter mit HTML! Versuche verschiedene Überschriften, füge mehr Bilder hinzu oder erstelle längere Texte. Je mehr du übst, desto besser wirst du. HTML lernen ist wie ein Spiel – hab Spaß dabei und sei stolz auf das, was du geschaffen hast.
Jetzt wird es bunt! Lerne CSS für Kinder und gestalte deine Webseite!
