Webdesign

Im modernen Webdesign kommt den verschiedenen Webtechniken jeweils eine bestimmte Rolle zu.

• HTML legt fest, was auf der Seite stehen soll (struktureller Aufbau einer Webseite)
• CSS legt fest, wie es dargestellt werden soll (Formatierung & Gestaltung)
• JavaScript legt fest, was passieren soll. (interaktive Elemente) .

HTML

Eine solche Auszeichnungssprache hat die Aufgabe, die logischen Bestandteile eines textorientierten Dokuments zu beschreiben. Als Auszeichnungssprache bietet HTML daher die Möglichkeit an, typische Elemente eines textorientierten Dokuments, wie Überschriften, Textabsätze, Listen, Tabellen oder Grafikreferenzen, als solche auszuzeichnen.

CSS

Bei Cascading Stylesheets handelt sich um eine unmittelbare Ergänzungssprache, die vorwiegend für HTML entwickelt wurde. Sie klinkt sich nahtlos in HTML ein und erlaubt das beliebige Formatieren einzelner HTML-Elemente.

Mit Hilfe von Stylesheets können Sie beispielsweise festlegen, dass alle Überschriften 24 Punkt groß sind und mit einem Nachabstand von 16 Punkt und mit einer grünen doppelten Rahmenlinie oberhalb dargestellt werden.

Überschrift {
  Schriftgröße: 24 Punkt;
  Abstand-unten: 16 Punkt;
  Rahmenfarbe-oben: grün;
  Rahmenart-oben: doppelt
}

JavaScript

JavaScripte haben Zugriff auf das Browserfenster und das darin angezeigte HTML-Dokument. Ihre wichtigste Aufgabe besteht darin, auf Benutzereingaben im Dokument zu reagieren (z.B. klickt der Benutzer auf ein Element oder gibt einen Text in ein Formularfeld ein). JavaScripte können daraufhin Änderungen im gegenwärtig angezeigten HTML-Dokument vornehmen. Diese Änderungen finden nur im Browser, genauer gesagt im Arbeitsspeicher des Rechners statt, während das Dokument auf dem Web-Server unangetastet bleibt.

Die Änderungen können sowohl den Inhalt als auch die Darstellung des Dokuments betreffen. Auf diese Weise kann ein Dokument interaktiv und »dynamisch« gestaltet werden. Das bedeutet, es kann auf Benutzereingaben reagieren und sich ändern, ohne dass ein neues Dokument vom Web-Server abgerufen werden muss. Beispielsweise können Zusatzinformationen eingeblendet werden, sobald der Anwender mit der Maus auf ein bestimmtes HTML-Element klickt.

SVG

SVG ist das einzige im Web breit einsetzbare Vektorgrafik-Format. Damit lassen sich in allen Viewport-Auflösungen gestochen scharfe Grafiken darstellen.

Man sollte es einsetzen, wenn sich die meisten Bildelemente mit SVG-Formen ausdrücken lassen und eine clientseitige Skalierbarkeit oder eine Dynamik gewünscht ist.