Woraus besteht eine Webseite? Kann man das auch selber machen? Was braucht es dazu?
Wie kann ein Computer überhaupt mit Texten umgehen? Seine grundlegende «Sprache» besteht aus 0 und 1, dem Binärsystem. Damit daraus für uns lesbare Zeichen werden, braucht es eine festgelegte Zuordnung zwischen Zahlen und Zeichen: eine Codierung. So kann eine Folge von 0 und 1 beispielsweise als Buchstaben, Zahlen oder Sonderzeichen interpretiert werden. Dies haben wir im Thema Information und Daten bereits kennengelernt.
Doch wie wird aus einfachem Text eine strukturierte und formatierte Webseite? Der Browser (das Programm, das die Webseite anzeigen soll) muss beispielsweise erkennen können, ob er Buchstaben fett oder kursiv, farbig oder als Überschrift darstellen soll. Dafür braucht es eine Möglichkeit, neben dem Inhalt auch die Struktur und die Formatierung zu beschreiben.
Aufgabe: Aufbau einer Webseite
Dieses Bild zeigt eine ganz simple Webseite.
Das nächste Bild zeigt die gleiche Webseite, jedoch mit dem Code, der dahinter steckt.
- Stelle Vermutungen an, wie die Struktur und die Formatierung der Webseite im Code beschrieben wird. Welche Elemente erkennst du? Welche Attribute werden verwendet?
- ⭐ Wie sieht der Code einer «echten» Webseite aus?
_ Öffne einen Browser und gehe auf die Seite www.gymkirchenfeld.ch
_ Klicke mit der rechten Maustaste auf eine freie Stelle der Seite
_ Wähle «Seitenquelltext anzeigen» aus.
_ Welche Elemente erkennst du?
Das nächste Kapitel zeigt, ob deine Vermutungen richtig sind… Wir wollen darin etwas tiefer in den Aufbau und die Struktur einer Webseite eintauchen.
Hypertext Markup Language
Die Hypertext Markup Language ist eine sogenannte Auszeichnungssprache. Mit ihr können Dokumente strukturiert werden. Die Struktur wird mittels Verschachtelung von HTML-Elementen erreicht
Cascading Stylesheets
Die Formatierung von Webseiten direkt in HTML ist zwar möglich, aber nicht sehr elegant. Was passiert beispielsweise, wenn man die Formatierung aller Überschriften einer Webseite ändern möchte? Dann müsste man in allen h1-HTML-Elementen die Formatierung ändern. Das ist sehr aufwendig und fehleranfällig.