Web-Programmierung1 - HTMLEinstieg in HTML

Einstieg in HTML

💡

Dauer: 30 Minuten
Vorführung / Live Coding: 30 Minuten

Themen:

  • Zweck von HTML, CSS und JavaScript
  • Elemente und Tags in HTML
  • HTML: Aufbau und Struktur

Ziel: Allgemeine Grundkonzepte in HTML verstehen

Frontend-Technologien in der Web-Entwicklung

Browser verstehen drei „Sprachen“: HTML, CSS und JavaScript (wir ignorieren hier Bilder, WebAssembly, usw.). Veranschaulichen lässt sich dies im Browser mit „view source“ für eine Webseite.

Struktur und Inhalte ⟶ HTML
Aussehen/Gestaltung ⟶ CSS
Verhalten/Logik und Interaktion ⟶ JavaScript

HTML ist die einfachste dieser Technologien. CSS ist bereits um einiges komplexer. JavaScript ist eine vollwertige Programmiersprache mit vielen zusätzlichen Aspekten (DOM, Events, JS-Frameworks, Bibliotheken, TypeScript, usw.).

Webseite: statischer Inhalt mit kaum interaktiver Logik (JavaScript)
Webanwendung: dynamischer Inhalt mit viel interaktiver Logik (JavaScript)

Kurze Vorführung des Zusammenspiels von HTML, CSS und 
JavaScript in Codepen.io (z.B. h1 mit Farbe, button und alert mit JS)

HTML allgemein

HTML steht für HyperTextMarkupLanguage. Mit Hypertext wird ausgedrückt, dass Webseiten durch Links miteinander verknüpft werden können. Markup Language steht für „Auszeichnungssprache“, mit der einzelne Elemente als Bestandteile der Webseite definiert werden.

Mehr zu HTML allgemein auf Prog Content

Elemente und Tags

Bildliche Darstellungen zu Elementen/Tags und Attributen zeigen auf Prog Content

Aufbau eines Elements am Whiteboard/Excalidraw zeigen (Elemente, 
öffnende/schließende Tags, hierarchische (Baum-)Struktur, Eltern- und
Kindelemente, leere Elemente, Attribute).

Ausführliche Beschreibung zu Elementen/Tags auf Prog Content

HTML zu lernen bedeutet, sich mit dem „Vokabular“ der verfügbaren Elemente vertraut zu machen.

In Codepen h1- und img-Elemente zeigen

Aufbau und Struktur

Die hierarchische Struktur eines HTML-Dokumentes ergibt sich aus DOCTYPE, html, head, body, weiteren Elementen und ggf. auch Kommentare.

Für Details siehe Prog Content

In Codepen h1- und img-Elemente zeigen und in html, head, body 
mit DOCTYPE überführen in lokale Datei in VS Code.
Browser tolerieren teilweise Fehler oder Ungenauigkeiten in HTML.
HTML-Dokumente auf Korrektheit validieren: https://validator.w3.org/

Lernressourcen

Im Web gibt es eine Fülle von sehr gutem und umfangreichem Lernmaterial (siehe die Liste unten).

„KI-Assistenten“ wie GitHub Copilot, Replit AI und ChatGPT werden immer wichtiger in der Programmierung. Sie helfen nicht nur dabei, Code zu erstellen, sondern sie sind auch nützlich, um sich Code und die zugrundeliegenden Konzepte erklären zu lassen. Somit können diese Werkzeuge als eine Art ständiger „Lernbegleiter“ eingesetzt werden.

VorbereitungenElemente