Wir arbeiten ganz praktisch anhand eines konkreten Website-Projektes: dabei können Sie entweder eine eigene, ganz individuelle Website nach und erarbeiten und mit Ihren steigenden Kenntnissen in HTML und CSS erweitern; Oder Sie bauen Schritt für Schritt die Beispiel-Website des Workshops nach.

Die grafische Gestaltung spielt dabei eine untergeordnete Rolle, es geht vor allem um das Grundverständnis der beiden Techniken HTML und CSS. Wir werden dabei möglichst standard-konformen HTML- und CSS-Code erzeugen. Auf exotische Möglichkeiten verzichten wir bewusst, um Ergebnisse zu erzielen, die ein möglichst gleiches Aussehen in den aktuellen Browsern haben.

• Woche 1: Aller Anfang ist ... - leicht!
  Das HTML-Grundgerüst Ihrer Website und Textformatierung mit HTML
  In der ersten Woche des Workshops machen Sie sich mit den Grundlagen von HTML vertraut, erstellen das HTML-Grundgerüst Ihrer Website und bringen Ihre Seiten per FTP ins Internet.

  Am Ende der ersten Woche

  • kennen Sie die HTML Regeln

  • und die Struktur einer HTML Datei,

  • Sie können Ihre Texte mit HTML formatieren

  • Bilder und Links auf Ihrer Website einfügen

  • und haben Ihre erste Beispiel-Website per FTP ins Internet übertragen.




• Woche 2: CSS-Grundlagen, CSS-Gestaltungsmittel & Navigation
  In der zweiten Woche lernen Sie die Grundlagen von CSS und diese CSS-Gestaltungsmöglichkeiten kennen:

  • Farben

  • Grafiken und

  • Schriftformatierung.

  Außerdem erfahren Sie, wie Sie HTML-Listen mit CSS formatieren und gestalten ein horizontales Navigationsmenü für Ihre (Beispiel-)Website.




• Woche 3: Die pflegeleichte Website: Trennung von Inhalt und Layout;
  Außerdem: Tabellen & Frames
  Der Vorteil von CSS ist, dass CSS erlaubt, den Inhalt einer Website von seiner Darstellung zu trennen. Wie die Gestaltung einer Website aussieht, kann dabei auch in einer externen CSS-Datei zentral festgelegt werden. Will man die Gestaltung der Website ändern, muss dann nur diese zentrale Datei - und nicht jede einzelne HTML-Seite - geändert werden. In dieser Woche erfahren Sie, wie das funktioniert und erstellen eine externe CSS-Datei für Ihre Beispiel-Website.

  Weitere Themen dieser Woche sind:

  • HTML Tabellen erstellen und mit CSS formatieren

  • Frames und IFrames

  • Plausibilitätsprüfung: Validieren von HTML und CSS Codes




• Woche 4: Feinschliff des Layouts mit CSS
  In der abschließenden Workshop-Woche widmen wir uns weiteren Möglichkeiten, eine Website mit CSS zu gestalten. Dazu zählen unter anderem:

  • Pseudoformate in CSS
    also die Formatierung eines Elements abhängig von seinem aktuellen Zustand. Gemeint ist damit etwa die unterschiedliche Formatierung eines Links, je nach dem ob er schon angeklickt wurde (besuchter Link) oder ob die Maus gerade auf diesen Link zeigt (Mouse-over Effekt)

  • die float-Eigenschaften
    um z.B. einen Text neben einem Bild oder ein Bild in der Textmitte zu platzieren

  • die Elemente 'div' und 'span'
    die uns mehr Gestaltungsfreiheit auf einer HTML-Seite verschaffen, um z.B. mehrere Elemente wie Text, Grafiken, Tabellen usw. in einen gemeinsamen Bereich einzuschließen und zu gruppieren oder um visuelle Besonderheiten an bestimmten Textstellen im Dokument, z.B. mitten im Satz, einzufügen

  • die display Eigenschaft
    mit der wir freier bestimmen können, wie HTML-Elemente auf der Seite angezeigt werden, so dass z.B. Aufzählungen nebeneinander, statt untereinander, erscheinen und

  • verschachtelte Selektoren
    mit denen wir innerhalb einer Formatierung zusätzliche Formatierung einfügen können, wenn z.B. Überschriften per CSS blau formatiert sind und wir möchten nun innerhalb dieser Überschrift ein oder mehrere Worte kursiv und rot setzen.

  Ein Ausblick auf fortgeschrittenes CSS schließt den Workshop ab.

Wieviel Zeit sollte ich für den Workshop einplanen?
Die bisherigen Teilnehmer dieses Workshops haben im Durchschnitt 10 - 15 Stunden pro Workshopwoche für das Lesen der Unterlagen und die Lösung der praktischen Übungen und Aufgaben aufgewendet.