Aus dem Kurs: Webdesign und Webprogrammierung - Grundlagen

HTML, CSS und JavaScript

Aus dem Kurs: Webdesign und Webprogrammierung - Grundlagen

Gratismonat starten Für Ihr Team erwerben

HTML, CSS und JavaScript

“

Drei Techniken sind entscheidend für Websites: HTML, CSS und JavaScript. Bevor wir uns genauer ansehen, wie diese einzeln funktionieren, schauen wir uns erst mal das Zusammenspiel von diesen Techniken an und wofür man die eigentlich braucht. Dazu ein ganz einfaches Beispiel: Sie sehen an dieser Stelle ein HTML-Dokument, was wirklich nur HTML beinhaltet. Und Sie sehen auch, das Dokument ist vollkommen umgestaltet. Vollkommen bestimmt nicht ganz. Die Überschriften sind ein bisschen größer, aber es gibt keine Farben etc. Das ist jetzt HTML pur. Wenn ich mir den Seitenquelltext ansehe, dann sind das alles HTML-Befehle und mehr nicht. HTML ist für die Struktur von Dokumenten zuständig und sagt bspw., das ist eine Überschrift der obersten Ebene, das eine Überschrift dadrunter, hier ist eine Liste, aber es ist nicht definiert, wie das genau aussehen soll. Um das Aussehen kümmert sich eine weitere Sprache, die heißt CSS, das steht für Cascading Style Sheets. Und wenn ich einmal CSS ergänze, dann kann mein Dokument bspw. so aussehen. Was ist technisch geschehen? Wenn wir in den Seitenquelltext gehen, dann sehen wir erst einmal unser HTML-Dokument wie eben auch. Eine Änderung gibt es an dieser Stelle, nämlich das ist ein Verweis auf eine CSS-Datei. Die kann ich anklicken, das ist meine CSS-Datei. Und was da drin steht, sind jetzt Formatierungsregeln. D.h. bspw. werden Farben definiert oder die Schriftart und dann kann mein Dokument eben ganz anders aussehen. D.h., CSS ist für die Formatierung zuständig, Und mit CSS sind auch solche Sachen möglich wie so kleine animierte Bereiche. Sie sehen, wenn ich mit der Maus auf den Button gehe, dann gibt es so eine kleine Animation. Ich wollte eben zeigen, dass das mit CSS auch geht. Aber derzeit ist es immer noch so, wenn ich auf diesen Button klicke, geschieht nichts. Ich könnte zwar einen normalen Link über HTML machen, aber der Button soll eine besondere Funktion haben, nämlich ein modales Fenster öffnen. Und wenn ich das machen möchte, dann brauche ich noch die dritte Sprache, die zentral für das Web ist, nämlich JavaScript. Bei diesem Beispiel ist nun JavaScript ergänzt. Auf den ersten Blick sieht das so aus wie eben auch. Aber wenn ich nun auf den Button klicke, dann öffnet sich so ein modales Fenster und für das modale Fenster ist eben JavaScript verantwortlich. Ich kann das modale Fenster auch wieder schließen. Schauen wir noch einmal in den Seiten-Quellcode und wir sehen, erst einmal sieht es so aus wie eben auch, aber wenn wir dann genau hinsehen, dann erkennen wir, eine Zeile ist dazugekommen. Das ist der Verweis auf die JavaScript-Datei. Ich kann die auch öffnen und dann sehe ich, das ist der JavaScript-Code, der dafür verantwortlich ist, dass dieses modale Fenster angezeigt wird. So ist also das Zusammenwirken der drei Sprachen. HTML macht die Basis und die Struktur. CSS kümmert sich um die Formatierungen, wie das Ganze aussehen soll. Und mit JavaScript kann man dann bestimmte Funktionalitäten definieren, wie bspw. modale Fenster öffnen.

Inhalt