Du träumst von einer eigenen Webseite, aber denkst, das ist kompliziert und teuer? Falsch! Mit diesem Guide zeigen wir dir, wie du komplett kostenlos und ohne Vorkenntnisse eine einfache, aber funktionierende Homepage mit HTML und JavaScript erstellen kannst. Keine Angst, wir erklären alles Schritt für Schritt, sodass auch absolute Anfänger mitkommen.
Warum HTML und JavaScript?
HTML (HyperText Markup Language) ist das Grundgerüst jeder Webseite. Es definiert die Struktur und den Inhalt, also Texte, Bilder, Links, etc. JavaScript hingegen bringt Leben in deine Webseite. Es ermöglicht interaktive Elemente, Animationen und dynamische Inhalte. Zusammen sind sie ein unschlagbares Team für den Start deiner Webpräsenz.
Schritt 1: Die Vorbereitung – Dein Editor
Bevor wir loslegen, brauchst du einen Texteditor. Keine Sorge, du musst dafür nichts bezahlen. Es gibt viele kostenlose und gute Editoren, wie z.B.:
- Visual Studio Code (VS Code): Sehr beliebt und umfangreich, mit vielen Erweiterungen.
- Sublime Text: Eine schlanke Alternative, die ebenfalls gut funktioniert.
- Notepad++ (für Windows): Ein einfacher, aber leistungsstarker Editor.
- TextEdit (für Mac): Auf Macs vorinstalliert, aber achte darauf, den „Plain Text”-Modus zu aktivieren (Format -> Make Plain Text).
Wähle einen Editor aus und installiere ihn. Dann kann es losgehen!
Schritt 2: Die HTML-Grundstruktur
Öffne deinen Editor und erstelle eine neue Datei. Speichere sie als index.html. Das ist die Hauptdatei deiner Webseite. Füge nun folgenden Code ein:
<!DOCTYPE html>
<html>
<head>
<title>Meine erste Webseite</title>
</head>
<body>
<h1>Hallo Welt!</h1>
<p>Das ist meine erste Webseite.</p>
</body>
</html>
Lass uns das kurz erklären:
<!DOCTYPE html>: Definiert den Dokumenttyp als HTML5 (die neueste Version).<html>: Das Wurzelelement deiner Webseite. Alles andere befindet sich innerhalb dieses Tags.<head>: Enthält Metadaten über die Webseite, wie den Titel, der im Browser-Tab angezeigt wird.<title>: Der Titel deiner Webseite.<body>: Der sichtbare Inhalt deiner Webseite.<h1>: Eine Überschrift der ersten Ebene.<p>: Ein Absatz.
Speichere die Datei und öffne sie in deinem Browser (z.B. indem du sie per Drag & Drop ins Browserfenster ziehst oder im Editor „Open in Browser” suchst). Du solltest nun „Hallo Welt!” und „Das ist meine erste Webseite.” sehen.
Schritt 3: Mehr Inhalt hinzufügen
Lass uns mehr Inhalt hinzufügen. Füge folgenden Code innerhalb des <body>-Tags hinzu:
<h2>Über mich</h2>
<p>Ich bin [Dein Name] und freue mich, dich auf meiner Webseite begrüßen zu dürfen.</p>
<h2>Meine Interessen</h2>
<ul>
<li>Programmieren</li>
<li>Webdesign</li>
<li>Kreatives Schreiben</li>
</ul>
<img src="https://via.placeholder.com/150" alt="Ein Platzhalterbild">
<a href="https://www.google.de">Besuche Google</a>
Hier sind die neuen Elemente:
<h2>: Eine Überschrift der zweiten Ebene.<ul>: Eine ungeordnete Liste (mit Aufzählungszeichen).<li>: Ein Listenelement.<img>: Ein Bild. Dassrc-Attribut gibt die URL des Bildes an. Dasalt-Attribut ist wichtig für die Barrierefreiheit und wird angezeigt, wenn das Bild nicht geladen werden kann.<a>: Ein Link. Dashref-Attribut gibt die Ziel-URL an.
Ersetze „[Dein Name]” mit deinem Namen und passe die Liste deiner Interessen an. Aktualisiere die Seite im Browser. Du solltest nun mehr Inhalt und ein Bild sehen.
Schritt 4: Styling mit CSS
Deine Webseite funktioniert, sieht aber noch etwas trist aus. Hier kommt CSS (Cascading Style Sheets) ins Spiel. CSS bestimmt das Aussehen deiner Webseite, wie Farben, Schriftarten und Layout.
Füge folgenden Code innerhalb des <head>-Tags hinzu:
<style>
body {
font-family: sans-serif;
background-color: #f0f0f0;
}
h1 {
color: blue;
}
p {
color: #333;
}
a {
color: green;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
Was passiert hier?
<style>: Definiert, dass wir CSS-Code schreiben.body { ... }: Definiert Stile für das<body>-Element, also den gesamten Inhalt der Webseite. Wir setzen die Schriftart auf eine serifenlose Schrift (sans-serif) und die Hintergrundfarbe auf ein helles Grau (#f0f0f0).h1 { ... }: Definiert die Farbe der<h1>-Überschriften auf blau.p { ... }: Definiert die Farbe der Absätze auf dunkelgrau (#333).a { ... }: Definiert die Farbe der Links auf grün und entfernt die Unterstreichung.a:hover { ... }: Definiert, dass beim Überfahren eines Links mit der Maus eine Unterstreichung angezeigt wird.
Aktualisiere die Seite im Browser. Du solltest nun sehen, dass sich das Aussehen deiner Webseite verändert hat. Experimentiere mit verschiedenen Farben, Schriftarten und anderen Stilen, um deine Webseite individueller zu gestalten.
Schritt 5: Interaktivität mit JavaScript
Jetzt wird es spannend! Wir bringen JavaScript ins Spiel, um unsere Webseite interaktiver zu machen. Füge folgenden Code vor dem schließenden </body>-Tag hinzu:
<button onclick="alert('Hallo! Du hast auf den Button geklickt!')">Klick mich!</button>
<script>
function changeText() {
document.getElementById("myText").innerHTML = "Der Text wurde geändert!";
}
</script>
<p id="myText">Dieser Text wird geändert.</p>
<button onclick="changeText()">Text ändern!</button>
Was passiert hier?
<button onclick="alert('Hallo! Du hast auf den Button geklickt!')">Klick mich!</button>: Erstellt einen Button. Dasonclick-Attribut definiert, was passieren soll, wenn der Button geklickt wird. In diesem Fall wird ein Alert-Fenster mit der Nachricht „Hallo! Du hast auf den Button geklickt!” angezeigt.<script> ... </script>: Definiert, dass wir JavaScript-Code schreiben.function changeText() { ... }: Definiert eine JavaScript-Funktion namenschangeText.document.getElementById("myText").innerHTML = "Der Text wurde geändert!";: Innerhalb derchangeText-Funktion wird das HTML-Element mit der ID „myText” gesucht und dessen Inhalt (innerHTML) auf „Der Text wurde geändert!” gesetzt.<p id="myText">Dieser Text wird geändert.</p>: Ein Absatz mit der ID „myText”. Die ID ist wichtig, damit wir das Element per JavaScript ansprechen können.<button onclick="changeText()">Text ändern!</button>: Ein weiterer Button, der beim Klick diechangeText-Funktion aufruft.
Aktualisiere die Seite im Browser. Du solltest nun zwei Buttons sehen. Klicke auf den ersten Button, um ein Alert-Fenster zu sehen. Klicke auf den zweiten Button, um den Text des Absatzes zu ändern.
Schritt 6: Deine Webseite online stellen (optional)
Jetzt hast du eine funktionierende Webseite! Aber sie ist nur auf deinem Computer sichtbar. Um sie online zu stellen, benötigst du Webhosting. Es gibt viele kostenlose Hosting-Anbieter, wie z.B.:
- Netlify: Sehr einfach zu bedienen und ideal für statische Webseiten.
- GitHub Pages: Kostenlos, wenn dein Code in einem öffentlichen GitHub-Repository liegt.
- Firebase Hosting: Eine weitere gute Option von Google.
Die genauen Schritte zum Hochladen deiner Webseite variieren je nach Hosting-Anbieter. In der Regel musst du deine Dateien (index.html und ggf. weitere Dateien) in einen bestimmten Ordner hochladen oder ein Repository erstellen und verlinken. Die Anbieter stellen in der Regel Anleitungen bereit, wie du das machst.
Fazit
Herzlichen Glückwunsch! Du hast deine erste eigene Webseite mit HTML und JavaScript erstellt. Das ist nur der Anfang! Es gibt noch viel mehr zu lernen und zu entdecken. Experimentiere weiter, probiere neue Dinge aus und lass deiner Kreativität freien Lauf. Das Internet ist voll von Ressourcen, Tutorials und Communities, die dir dabei helfen können.
Denke daran: Übung macht den Meister. Je mehr du dich mit HTML, CSS und JavaScript beschäftigst, desto besser wirst du darin. Viel Spaß!