Das Ziel dieser Serie ist es, Sie mit den aktuellen Techniken moderner Webanwendungen vertraut zu machen. Diesmal geht es um die Gestaltung des Inhalts mit Cascading Style Sheets (CSS). Die Gestaltungsoptionen haben mit der Version CSS3 erheblich zugenommen. Wir stellen hier die wichtigsten Möglichkeiten vor, die Sie für das Erstellen von Webanwendungen brauchen.
Moderne Webprogrammierung, gleichgültig welche Technik Sie letztendlich einsetzen, basiert immer auf dem Zusammenspiel von HTML, CSS und JavaScript. Insofern erzählen wir Ihnen hier nichts Neues, und dennoch nehmen wir die zahlreichen erweiterten Möglichkeiten der neuen Versionen dieser Technologien zum Anlass, systematisch mit den Grundlagen zu beginnen. Die Neuerungen und die strikte Verwendung von HTML5 als Seitenbeschreibungssprache haben wir Ihnen bereits im ersten Teil der Artikelserie vorgestellt. Das Fazit aus dieser einführenden Darstellung lautet „HTML5 definiert die Bedeutung, d. h. die Semantik einer Webseite – nicht deren Aussehen bzw. Design“. Mit anderen Worten: Die früher noch üblichen Formatanweisungen, die direkt in die HTML-Tags notiert wurden, lassen Sie bitte unter allen Umständen bleiben! Für die Darstellung (Design) des Inhalts ist ausschließlich die Style-Sheet-Sprache CSS verantwortlich. Auf CSS gehen wir jetzt in kompakter Art und Weise ein und schaffen damit das Fundament für solide und moderne Webapplikationen. Abbildung 1 zeigt die Lernpyramide der Technologien, wie wir sie in diesem Kurs durchlaufen.
Abb. 1: Die Pyramide der Technologien für eine moderne Webapplikation
Das Zusammenspiel
Das Zusammenspiel zwischen HTML und CSS haben wir gerade schon erläutert: Die zentrale Rolle spielt das jeweilige HTML-Element. In ihm wird der Inhalt definiert, also welche Textbestandteile die Überschrift sind, welche Elemente die Navigation bilden und welche Texte für den eigentlichen Inhalt zuständig sind. Wie die einzelnen Elemente letztendlich dargestellt werden, wird über CSS festgelegt. Die Einbettung von Skripten (JavaScript) führt zur Interaktionsfähigkeit der Webapplikation auf Seiten des Clients. CSS und JavaScript lagert man aus Gründen einer guten Anwendungsarchitektur aus den HTML-Dokumenten in eigene Dateien aus. Komplettiert wird eine Webseite schließlich durch weitere Elemente (Medien), wie zum Beispiel Bilder oder Videos. Wir werden jetzt das eine oder andere Beispiel erstellen, dazu brauchen wir immer etwas Content in Form von Text. Webdesigner nutzen dazu so genannte Blindtexte.
