Wie Sie HTML an einem Wochenende lernen

Eine praktische Anleitung, um HTML-Grundlagen in nur zwei Tagen zu meistern - für Familien aller Altersgruppen.

  1. Samstag Vormittag: Die Grundlagen verstehen. Beginnen Sie mit den absoluten Basics. HTML steht für 'HyperText Markup Language' und ist wie ein Baukasten für Webseiten. Installieren Sie einen einfachen Texteditor wie Notepad++ oder verwenden Sie den bereits vorhandenen Editor Ihres Computers. Erstellen Sie Ihre erste HTML-Datei mit der Endung '.html' und lernen Sie die grundlegende Struktur: <html>, <head> und <body>. Schreiben Sie Ihren ersten Text zwischen <h1>-Tags für Überschriften und <p>-Tags für Absätze. Speichern Sie die Datei und öffnen Sie sie in Ihrem Browser - Sie sehen Ihre erste selbstgemachte Webseite!
  2. Samstag Nachmittag: Text formatieren und strukturieren. Jetzt wird es spannend! Lernen Sie, wie Sie Text mit verschiedenen Tags gestalten. Verwenden Sie <strong> für fetten Text, <em> für kursiven Text und <u> für unterstrichenen Text. Erstellen Sie Listen mit <ul> für Aufzählungen und <ol> für nummerierte Listen. Jeder Listenpunkt bekommt ein <li>-Tag. Probieren Sie verschiedene Überschriftengrößen aus: <h1> ist am größten, <h6> am kleinsten. Fügen Sie Zeilenumbrüche mit <br> ein und trennen Sie Bereiche mit <hr>-Linien. Experimentieren Sie mit allem - HTML verzeiht Fehler!
  3. Samstag Abend: Links und Bilder einfügen. Machen Sie Ihre Webseite interaktiv! Links erstellen Sie mit dem <a>-Tag und dem 'href'-Attribut: <a href='https://www.beispiel.de'>Klick hier</a>. Für Bilder verwenden Sie das <img>-Tag mit 'src' für die Bildquelle und 'alt' für eine Beschreibung: <img src='meinbild.jpg' alt='Beschreibung'>. Laden Sie kostenlose Bilder von Seiten wie Pixabay herunter oder verwenden Sie eigene Fotos. Achten Sie darauf, dass Bilder im selben Ordner wie Ihre HTML-Datei liegen. Verlinken Sie zwischen verschiedenen Seiten, die Sie erstellen - so entsteht Ihre erste kleine Website!
  4. Sonntag Vormittag: Tabellen und Formulare. Tabellen sind perfekt für strukturierte Daten. Beginnen Sie mit <table>, erstellen Sie Zeilen mit <tr> und Zellen mit <td>. Für Tabellenköpfe verwenden Sie <th>. Ein einfaches Beispiel: eine Familientabelle mit Namen und Alter. Formulare beginnen mit <form> und enthalten Eingabefelder wie <input type='text'> für Text, <input type='email'> für E-Mail-Adressen und <textarea> für längere Texte. Fügen Sie Beschriftungen mit <label> hinzu und einen <button> zum Absenden. Auch wenn das Formular noch nicht funktional ist, lernen Sie die Struktur.
  5. Sonntag Nachmittag: Styling mit CSS-Grundlagen. Jetzt machen Sie Ihre Seite schön! CSS (Cascading Style Sheets) verleiht HTML Farbe und Stil. Fügen Sie CSS direkt in Ihr HTML mit <style>-Tags im <head>-Bereich ein. Ändern Sie Farben mit 'color: blue;', Hintergrundfarben mit 'background-color: yellow;' und Schriftgrößen mit 'font-size: 20px;'. Zentrieren Sie Text mit 'text-align: center;' und fügen Sie Abstände mit 'margin' und 'padding' hinzu. Experimentieren Sie mit verschiedenen Schriftarten über 'font-family'. Schon wenige CSS-Regeln verwandeln Ihre schlichte Seite in etwas Besonderes!
  6. Sonntag Abend: Ihre erste richtige Website. Setzen Sie alles zusammen! Erstellen Sie eine mehrseitige Familie-Website mit einer Startseite, einer 'Über uns'-Seite und vielleicht einer Fotogalerie. Verwenden Sie eine einheitliche Navigation mit Links zu allen Seiten. Strukturieren Sie jede Seite mit Kopfbereich, Hauptinhalt und Fußbereich. Nutzen Sie <div>-Tags, um Bereiche zu gruppieren und mit CSS zu gestalten. Fügen Sie ein Familienfoto hinzu, schreiben Sie über Ihre Hobbys und erstellen Sie eine Kontaktseite. Am Ende haben Sie nicht nur HTML gelernt, sondern auch etwas Bleibendes geschaffen!