HTML, CSS und JavaScript

Alle Webseiten bestehen aus drei Techniken, nämlich HTML, CSS und JavaScript. Schauen wir uns an, wie diese zusammenarbeiten. Erst einmal: Die Basis für alle Webseiten ist immer HTML. Hier sehen Sie die Webseite der HTML-Spezifikation. Da kann man nachlesen, wie HTML funktioniert. HTML steht für Hypertext Markup Language, es ist also eine Auszeichnungssprache für Hyper-Text. Hyper-Text ist Text mit Verlinkungen, also, die entscheidende Komponente an HTML ist dieses Markup. Und HTML selbst wird von zwei Organisationen betreut, nämlich vom W3C und von der WhatWG. Und in diesen Organisationen arbeiten Arbeitsgruppen, die die einzelnen Sachen entwickeln. Und HTML ist ein offener Standard. Was ist das Grundprinzip von HTML? In HTML verwendet man sogenannte Tags, um Inhalte auszuzeichnen. Und üblicherweise hat man einen Start-Tag und einen End-Tag und hier sehen Sie ein kleines Beispiel. Wenn ich jetzt einen Text habe, wie "Meine erste Website", dann ist erst einmal nicht klar, was für ein Text das ist. Wenn ich hingegen dann h1 schreibe und h1 ende, dann kennzeichne ich, dass dieser Text eine Überschrift ist, und dafür verwende ich einen Start-Tag und ein End-Tag. Und der End-Tag schaut genauso aus wie der Start-Tag, aber es gibt zusätzlich einen Slash. Ich habe gesagt, dass alle Webseiten aus HTML-Code bestehen. Das kann man sich auch ansehen. Ich bin hier auf der Seite vom W3C, vom World Wide Web Consortium. Ich rufe die Seite gerade im Firefox auf und ich kann dann mit der rechten Maustaste klicken und sagen "Seitenquelltext anzeigen" und dann sehe ich den Seitenquelltext dieser Webseite und ich sehe ganz viele von diesen Start-Tags und End-Tags und sehe hier bspw. auch schön das Grundprinzip mit Start-Tag und End-Tag mit diesem zusätzlichen Slash. Und HTML zu lernen, heißt, zu lernen, welche Elemente es gibt und wie die ineinander verschachtelt werden. Alle Webseiten bestehen aus HTML-Code. Manchmal kann man den nicht so schön sehen wie beim W3C, hier gibt es auch zusätzlich ganz viel JavaScript-Code. Da sieht man gerade jetzt nicht so gut den HTML-Code. Dann kann man auch über die Entwicklertools gehen, hier rechte Maustaste und Untersuchen, und dann sehe ich hier schöner eingeordnet den HTML-Code, auch wieder das Prinzip mit Start-Tag und End-Tag. Also, das ist die eine Komponente von Webseiten, nämlich HTML; außerdem gibt es CSS. CSS ist für die Optik zuständig und das zeige ich an einem Beispiel, was inzwischen schon etwas veraltet ist, nämlich CSS Zen Garden. Und das Grundprinzip ist da, dass ein und derselbe HTML-Code mit CSS unterschiedlich gestaltet wird, d.h., der HTML-Code kann so aussehen, so gestaltet sein, er kann aber auch mit einem anderen Stylesheet ganz anders gestaltet werden oder bspw. auch so aussehen. Es ist aber ein und derselbe CSS-Code. Was CSS-Code macht, kann man sich gut ansehen, wenn man den einmal deaktiviert. Und das kann ich machen, indem ich mir die Menüleiste anzeigen lasse und dann gehe ich in Ansicht > Webseitenstil > Kein Stil und dann sehe ich eben, wie die Webseite ohne den besonderen CSS-Code aussieht. CSS steht für Cascading Style Sheets. Es ist eine Formatierungssprache. Diese Sprache wird vom World Wide Web Consortium, d.h. vom W3C, betreut. CSS hat eine eigene Syntax. Und die Formatierungen lassen sich zentral festlegen, d.h., ich kann Formatierungen in einer Datei angeben und diese gelten dann für ganz viele Seiten des Projekts. Und außerdem kann ich unterschiedliche Formatierungen, je nach Viewportgröße machen, d.h. unterschiedliche Formatierungen, wenn es sich um ein Smartphone oder einen Desktop-Rechner handelt. Sie haben eben gesehen: In HTML verwendet man ganz viel diese spitzen Klammern. Die Syntax in CSS ist anders. Und das Grundprinzip ist immer dort so, dass man zuerst einen Selektor hat, d.h., man sagt: Wer oder was soll formatiert werden? Und dann gibt es geschweifte Klammern und da steht dann eine Eigenschaft, der ein Wert zugewiesen wird. Im Beispiel würde ich dem h2-Element eine rote Hintergrundfarbe zuweisen. Die dritte Sprache ist JavaScript. Es ist eine Programmiersprache und die kann eben auch im Browser ausgeführt werden. Offiziell wird JavaScript von ECMA betreut und man spricht deswegen auch von ECMA-Skript. Was macht JavaScript? Sie können es für ganz verschiedene Sachen einsetzen. Sie können es bspw. nutzen, um Formulareingaben zu überprüfen. Sie können außerdem Daten auch senden, ohne dass der Browser die Seite neu laden muss. Man kann es bspw. für Vorschlagslisten bei Suchen verwenden oder für Slider und Fotogalerien. Die Syntax von JavaScript ist vollkommen anders. Sie erkennen JavaScript daran, dass es ein Skript-Element im HTML-Code gibt und dann ist der eigentliche JavaScript-Code ganz anders als CSS oder HTML. Und man kann mit JavaScript, bspw. wie hier, auf eine Aktion des Nutzers auch reagieren. Zum Schluss noch zwei kleine Beispiele für JavaScript. Wenn ich hier etwas beginne, einzugeben, dann erhalte ich eine Vorschlagsliste. Das ist ein typischer Einsatz von JavaScript. Und JavaScript kann aber auch richtig für Anwendungen verwendet werden, wie bspw. Google Maps, wo ich ja richtig interagieren kann mit der Webseite. Das ist natürlich jetzt eine komplexe Anwendung. Also, HTML ist die Basis von allen Webseiten; CSS ist für die Formatierungen zuständig und JavaScript für die Interaktion.