Olena Bochkor Selbstständig

Unterlassen Sie in HTML alles, was mit dem Styling der Webseite zu tun hat. Das ist in CSS zu erledigen. Die Styles werden an zentraler Stelle möglichst aufbauend aufeinander definiert und über den link-Tag eingebunden

Dr. Veikko Krypczyk Selbstständig

Die Möglichkeiten, die dem Webentwickler und -designer mit CSS3 heute zur Verfügung stehen, sind schon enorm. Allein mit HTML5 und CSS3 können Sie umfassende Webauftritte gestalten.

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

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.

Den vollständigen Artikel lesen Sie in der Ausgabe:

Entwickler Magazin 6.18 - "GraphQL"

Alle Infos zum Heft
579861558Modernes Webdesign mit CSS3 – ein Überblick über die Kernfeatures
X
- Gib Deinen Standort ein -
- or -