Magento 2 Experten — Hyvä Theme, Tailwind CSS & SEO aus einer Hand ›

HTML Tutorial für Anfänger: Schritt für Schritt erklärt | Mironsoft

HTML: Das komplette Tutorial für Einsteiger

HTML von null auf gelernt, ganz ohne Vorwissen: jedes Element einzeln erklärt, mit vielen einfachen Beispielen, an einer einzigen, durchgehenden Beispiel-Webseite. Bewusst nur HTML - kein CSS, kein JavaScript.

Das lernst du

  • Wie eine Webseite aufgebaut ist und wie der Browser HTML in eine sichtbare Seite verwandelt
  • Alle wichtigen HTML-Elemente: Text, Listen, Links, Bilder, Tabellen und Formulare
  • Wie man eine mehrseitige Webseite mit sauberer, semantischer Struktur baut
  • Grundlagen der Barrierefreiheit, die von Anfang an mitgedacht werden

Voraussetzungen

  • Keine Vorkenntnisse nötig - dieses Tutorial startet bei absolut null

Kapitel dieser Serie

  1. 1 Was ist eine Webseite? Wie funktioniert das Internet? ~6 Min. Lesezeit
  2. 2 Werkzeuge einrichten: Texteditor und Browser ~7 Min. Lesezeit
  3. 3 Die erste HTML-Datei erstellen und im Browser öffnen ~8 Min. Lesezeit
  4. 4 Das Grundgerüst: DOCTYPE, html, head und body ~9 Min. Lesezeit
  5. 5 Kommentare in HTML: Notizen, die niemand sieht ~5 Min. Lesezeit
  6. 6 Überschriften: h1 bis h6 ~7 Min. Lesezeit
  7. 7 Absätze mit <p> ~6 Min. Lesezeit
  8. 8 Zeilenumbrüche und Trennlinien: <br> und <hr> ~6 Min. Lesezeit
  9. 9 Text hervorheben: <strong> und <em> ~6 Min. Lesezeit
  10. 10 Weitere Textauszeichnung: small, mark, del, ins ~6 Min. Lesezeit
  11. 11 Ungeordnete Listen: <ul> und <li> ~7 Min. Lesezeit
  12. 12 Geordnete Listen und Beschreibungslisten: ol und dl ~7 Min. Lesezeit
  13. 13 Der Link: <a href="..."> ~7 Min. Lesezeit
  14. 14 Zu anderen Seiten der eigenen Webseite verlinken ~9 Min. Lesezeit
  15. 15 Zu externen Webseiten verlinken: target="_blank" ~6 Min. Lesezeit
  16. 16 Sprungmarken innerhalb einer Seite (Anker-Links) ~7 Min. Lesezeit
  17. 17 Bilder einfügen mit <img> und das alt-Attribut ~8 Min. Lesezeit
  18. 18 Bildgrößen mit width/height, und wo Bilder herkommen dürfen ~8 Min. Lesezeit
  19. 19 Bilder mit Beschriftung: <figure> und <figcaption> ~6 Min. Lesezeit
  20. 20 Videos einbetten mit <video> ~8 Min. Lesezeit
  21. 21 Töne einbetten mit <audio> ~5 Min. Lesezeit
  22. 22 Die Grundstruktur einer Tabelle: table, tr, td ~8 Min. Lesezeit
  23. 23 Kopfzeilen mit th, thead/tbody, und caption ~8 Min. Lesezeit
  24. 24 Zellen verbinden: colspan und rowspan ~7 Min. Lesezeit
  25. 25 Was ist ein Formular? Die form- und input-Grundlagen ~8 Min. Lesezeit
  26. 26 Verschiedene Eingabefelder: text, email, number, password, date ~9 Min. Lesezeit
  27. 27 Auswahlmöglichkeiten: checkbox, radio, select ~9 Min. Lesezeit
  28. 28 Mehrzeiliger Text: textarea, und label richtig verknüpfen ~7 Min. Lesezeit
  29. 29 Buttons und das Absenden von Formularen ~7 Min. Lesezeit
  30. 30 Ein komplettes Kontaktformular bauen ~9 Min. Lesezeit
  31. 31 Warum <div> und <span> allein nicht reichen ~7 Min. Lesezeit
  32. 32 Kopf- und Fußbereich: header, footer, nav ~8 Min. Lesezeit
  33. 33 Hauptinhalt gliedern: main, section, article, aside ~9 Min. Lesezeit
  34. 34 Die eigene Webseite komplett neu strukturieren ~9 Min. Lesezeit
  35. 35 Attribute vertieft: id und class als Namensschilder für später ~7 Min. Lesezeit
  36. 36 Meta-Informationen im head: title, charset, viewport, description ~8 Min. Lesezeit
  37. 37 Sonderzeichen richtig schreiben: &, <, © und Umlaute ~7 Min. Lesezeit
  38. 38 Barrierefreiheit: warum alt-Texte und gute Struktur allen helfen ~8 Min. Lesezeit
  39. 39 Häufige Fehler und wie man sie findet ~8 Min. Lesezeit
  40. 40 Zusammenfassung: die fertige Webseite und ein Ausblick auf CSS ~9 Min. Lesezeit