HTML
Ziele
- Ich weiss, was HTML ist und warum es bei Webseiten angewendet wird.
- Ich kann zwischen HTML, CSS und JavaScript unterscheiden.
Wie funktionieren Webseiten?
Im Gegensatz zu Desktop-Programmen SOLLTEN Webseiten auf jedem Betriebssystem und Browser gleich laufen und aussehen. Damit das funktionieren kann, müssen die Webseiten so programmiert/geschrieben worden sein, dass sie von jedem Browser verstanden werden können.
Genau das wird mit HTML erreicht. Jeder Browser versteht HTML.
Was ist HTML?
Beginnen wir mit der Definition der Abkürzung “HTML”. Diese steht für “HyperText Markup Language”. Okay, was aber bedeutet das?
Mit HyperText ist ein Dokument gemeint, das in der Regel nicht dafür gemacht ist, um von oben nach unten gelesen zu werden. HyperText enthält also z.B. Links, die auf andere Dokumente oder zu anderen Stellen auf der gleichen Seite führen. Unter Markup ist zu verstehen, dass das Dokument strukturiert (Kopfzeilen, Hauptteil, Fusszeilen) und formatiert (z.B. kursiver/fetter Text) ist.
Somit ist HTML also eine Sprache, die alle Elemente auf einer Webseite BESCHREIBT. Die Betonung liegt hier auf “beschreibt”. Das bedeutet, dass HTML keine Programmiersprache ist. Code, der auf der Webseite ausgeführt wird, ist in JavaScript geschrieben.
Übersicht zu HTML, CSS und JavaScript (JS)
Während Deiner Einführung in die Webentwicklung wirst du die Begriffe “HTML”, “CSS” und “JavaScript” immer wieder hören bzw. lesen. Deswegen beginnen wir mit einem Überblick:
Im HTML beschreibst du die Struktur einer Webseite und fügst auch die wichtigsten Elemente davon ein. Diese Elemente können Text, UI-Elemente, Bilder und vieles mehr sein.
In CSS beschreibst du, wie das HTML im Browser aussehen soll. Beispielsweise kannst du Schriftfarben, -arten, -grössen, das Aussehen von UI-Elementen und Layouts damit beschreiben.
Möchtest du im Browser Code ausführen, dann geschieht das mit der Programmiersprache JavaScript. Zum Beispiel kannst Du im HTML definieren, dass eine JavaScript-Funktion ausgeführt wird, wenn Du auf einen Button klickst.