Mitlesen und programmieren: Eine einfache Webseite erstellen
Befolgen Sie Schritt für Schritt die Anleitungen, um eine unterhaltsame Seite zu erstellen
Mitlesen und programmieren: Eine einfache Webseite erstellen ist eine kostenlose HTML for Kids-Lektion auf CoddyKit. Dies ist Lektion 1 von 2. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML for Kids-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML for Kids-Kurs umfasst insgesamt 2 Lektionen.
Ihre erste Webseite erstellen
Gemeinsam programmieren: Eine einfache Webseite erstellen
Willkommen bei Ihrem ersten Programmierprojekt! In dieser Lektion erstellen wir Schritt für Schritt eine einfache Webseite. Machen Sie mit und sehen Sie, wie HTML, CSS und grundlegendes Design zusammenspielen.
Ziel: Erstellen Sie eine persönliche Profilseite.
Ihre Datei einrichten
Schritt 1: Ihre Datei einrichten
Erstellen wir zunächst einen Ordner für Ihr Projekt und fügen eine HTML-Datei hinzu:
- Erstellen Sie auf Ihrem Computer einen neuen Ordner mit dem Namen MyWebPage.
- Erstellen Sie im Ordner eine Datei mit dem Namen
index.html. - Öffnen Sie die Datei in Ihrem Code-Editor (z. B. Visual Studio Code).
Tipp: Der Dateiname index.html wird häufig für die Hauptseite einer Website verwendet.
Die grundlegende Struktur hinzufügen
Schritt 2: Die grundlegende Struktur hinzufügen
Fügen Sie nun die grundlegende HTML-Struktur zu Ihrer Datei hinzu. Dazu gehören die Tags <!DOCTYPE html>, <html>, <head> und <body>.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<title>My Profile Page</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is my personal profile page.</p>
</body>
</html>
Einen Profilbereich hinzufügen
Schritt 3: Einen Profilbereich hinzufügen
Fügen wir einen Bereich hinzu, in dem Ihr Name und eine kurze Beschreibung angezeigt werden.
Beispiel:
<body>
<h1>Welcome to My Page</h1>
<p>This is my personal profile page.</p>
<!-- Profile Section -->
<h2>About Me</h2>
<p>Hi, I’m [Your Name]. I’m learning web development, and this is my first project!</p>
</body>
Ein Bild hinzufügen
Schritt 4: Ein Bild hinzufügen
Fügen wir als Nächstes mithilfe des Tags <img> ein Profilbild hinzu. Speichern Sie ein Bild im Projektordner und verknüpfen Sie es mit Ihrer HTML-Datei.
Beispiel:
<!-- Profile Picture -->
<img src="profile.jpg" alt="My Profile Picture" width="200" />
Eine Liste mit Hobbys hinzufügen
Schritt 5: Eine Liste mit Hobbys hinzufügen
Erstellen Sie mithilfe der Tags <ul> und <li> eine ungeordnete Liste Ihrer Hobbys.
Beispiel:
<!-- Hobbies Section -->
<h2>My Hobbies</h2>
<ul>
<li>Reading books</li>
<li>Playing video games</li>
<li>Coding projects</li>
</ul>
Einen Link hinzufügen
Schritt 6: Einen Link hinzufügen
Fügen Sie mithilfe des Tags <a> einen Link zu Ihrer Lieblingswebsite hinzu.
Beispiel:
<!-- Favorite Website -->
<h2>My Favorite Website</h2>
<p>Check out my favorite website: <a href="https://example.com" target="_blank">Example</a>.</p>
Inline-Styles hinzufügen
Schritt 7: Inline-Styles hinzufügen
Fügen wir mithilfe des Attributs style einige grundlegende Styles direkt zu Ihrem HTML hinzu.
Beispiel:
<h1 style="color: blue; text-align: center;">Welcome to My Page</h1>
<p style="font-size: 16px; color: gray;">This is my personal profile page.</p>
Zusammenfassung des Webseitenprojekts
Großartige Arbeit!
Herzlichen Glückwunsch! Sie haben Schritt für Schritt Ihre erste Webseite erstellt. In diesem Projekt haben Sie gelernt, wie Sie Ihr HTML strukturieren, Inhalte hinzufügen und sie mit Inline-Styles gestalten. Experimentieren Sie weiter und fügen Sie Ihrer Seite neue Bereiche hinzu!
Tipp: Hosten Sie Ihre Seite auf GitHub Pages, um sie mit Freunden zu teilen!
Häufig gestellte Fragen
Ist die Lektion „Mitlesen und programmieren: Eine einfache Webseite erstellen“ kostenlos?
Ja — der vollständige Text von „Mitlesen und programmieren: Eine einfache Webseite erstellen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML for Kids-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML for Kids-Kurs umfasst insgesamt 2 Lektionen.
Was lerne ich in „Mitlesen und programmieren: Eine einfache Webseite erstellen“?
Befolgen Sie Schritt für Schritt die Anleitungen, um eine unterhaltsame Seite zu erstellen Du übst HTML for Kids mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um HTML for Kids zu starten?
Keine Vorkenntnisse erforderlich. HTML for Kids auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 2.
Wie lange dauert die Lektion „Mitlesen und programmieren: Eine einfache Webseite erstellen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser HTML for Kids-Lektion Code schreiben und ausführen?
Ja. Jede HTML for Kids-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Mitlesen und programmieren: Eine einfache Webseite erstellen
- HTML-Schnitzeljagd