Website (XHTML/CSS) - 05. März 09

Aktualisiert: 04.03.2009

An den ersten beiden Kurstagen befassen wir uns mit den Grundlagen der Webentwicklung. Im Vordergrund stehen dabei das Erlernen der Auszeichnungssprache XHTML und der Darstellungssprache CSS.

Einführung

Web-Terminologien

Im Umfeld der Webentwicklung gibt es eine Unzahl von Begrifflichkeiten, die gerne einmal durcheinander geraten. Wir wollen da gleich zu Beginn ein wenig Ordnung in den Begriffsalat bringen und gleichzeit auch den Kursinhalt des Seminars genauer positionieren. Populäre Begriffe aus der Webentwicklung sind:

  • XHTML, CSS und JavaScript
  • PHP
  • Flash
  • CMS und Blogs
  • Webapplikationen (web-basierte Anwendungen)
  • Web Frameworks (Ruby on Rails, CakePHP etc.)
  • Social Software (Facebook, Twitter etc.)
  • Schreiben oder Programmieren?

Und was davon machen wir eigentlich in diesem Kurs?

Entwickeln mit Webstandards

Bevor wir uns konkret mit dem Erlernen des XHTML/CSS Vokabulars befassen, sollten wir noch einige Fragen klären: Was sind eigentlich Webstandards? Was heisst das Akronym W3C? Was hat es mit der Barrierefreiheit von Websites auf sich? Was bedeuten die Begriffe Usability und Accessibility?

Entwickeln nach Webstandards heisst:

  • Verwendung von W3C-Standards (XHTML, CSS etc.)
  • Trennung von Struktur und Darstellung
  • Einfachere Entwicklung und Wartung
  • Nachhaltigkeit (neue Webbrowser etc.)
  • Schnellere Darstellung der Website
  • Bessere Zugänglichkeit (keine Frames!)
  • Suchmaschinenfreundlich

Weiterführende Ressourcen zum Thema Webstandards

Trennung von Struktur und Darstellung

Die standardkonforme Entwicklung von Websites beruht auf der strikten Trennung von Struktur und Darstellung. Mit Hilfe der Auszeichnungssprache XHTML wird das Grundgerüst einer Website gebaut, die Darstellungssprache CSS ermöglicht die visuell Gestaltung des Auftritts. Das Projekt css Zen Garden zeigt, was sich dank CSS aus einem identischen HTML-Gerüst einer Website alles zaubern lässt:

Trends im Webdesign

Was bedeutet heute gutes Webdesign? Welches sind die aktuellen Trends und worauf kommt es dabei genau an? Wir analysieren ausgewählte Beispiele und lernen dabei einige Trends des modernen Webdesigns kennen:

Weiterführende Artikel zum Thema Webtrends:

Browser, Endgeräte und diverse Ausgabemedien

Websites werden in den häufigsten Fällen in einem Browser dargestellt. Es gibt Browser für beliebige Endgerät, sei das für den Laptop oder aber auch fürs Mobiltelefon. Websites müssen jedoch nicht nur für die unterschiedlichsten Browser optimiert werden, sondern auch Suchmaschinen bedienen oder in anderen Ausgabeformaten (Print, Audio) zur Verfügung gestellt werden.

Hilfsmittel für die Webentwicklung

Ziel des Kurses ist das Erlernen der Grundlagen der Webentwicklung, d.h. mittels XHTML und CSS einfache Websites schreiben zu können. Hierfür stehen uns eine Vielzahl von nützlichen Hilfsmittel zur Verfügung: Code-Editoren, WYSIWYG-Editoren und Browser-Erweiterungen.

Snippet: Hilfsmittel fürs Webauthoring

XHTML: Dokumentaufbau und Syntax

Einführung in die Syntax und den XHTML-Dokumentaufbau. Wie wird ein XHTML-Dokument richtig strukturiert? Welche Bedeutung haben diese kryptischen Referenzierungen am Dokumentanfang? Wie werden die Inhalt semantisch korrekt ausgezeichnet? Neben der Beantwortung dieser Fragen schauen wir uns die wesentlichen XHTML-Elemente an und lernen ein sauberes XHTML-Dokument zu schreiben.

Snippets zum Thema

Weiterführende Links

CSS: Einbindung und Syntax

Nun lernen wir ein Dokument mit Hilfe der Darstellungssprache CSS zu formatieren. Wir lernen drei Varianten kennen, wie man Stile XHTML-Elementen zuweisen kann. Anschliessend beschäftigen wir uns ausführlich mit den diversen CSS-Selektoren.

Snippets zum Thema

Weiterführende Links

Weiterführende Online-Lehrgänge

Die Grundlagen der Webentwicklung wie sie in diesem Seminar vermittelt werden, lassen sich auch durch entsprechende Online-Lehrgänge vertiefen. Folgend einige empfehlenswerten Quellen:

Neben diesen Lehrgängen ist auch immer praktisch eine gute XHTML und CSS Referenz zur Hand zu haben:

Oder aber in Form eines kompakten Spickzettels: