x-html & css einführung

Hier findet sich das Material zum Webpublishing-Workshop im MMS unter meiner und Jana Oepens Leitung.

Ablauf

• Begrüßung und Vorstellung der Teilnehmer
• Einführung in Betriebssystem und Basisbegriffe des Internet
  Quellcode, HTML, etc.
• Vorstellung des Workshopablaufs
• Sneak Preview: What the web can be.
  Links und Hilfe für Webentwickler.
• Vorstellung der Tools
  Browser, Editoren und Hilfsprogramme
• Projektentwicklung
  Einführung in X-HTML und CSS anhand eines Beispiels

Projektbeispiel

1. Leere Seite – HTML Grundgerüst
2. Seite mit Inhalt – Absätze und Überschriften
3. Menü – Listen
4. Linked – Verweise auf andere Seiten und E-Mailadressen
5. Image – Verknüpfung mit Bildern
6. Position – Ausrichtung des Bildes mit Hilfe eines Styleattributs
7. Styleattribut – Anwendung von CSS auf beliebige HTML-Elemente
8. Stylezentral – zentrale Definition von Formaten f�r HTML-Elemente
9. Klassen – Formatvorlagen auf Webseiten
10. Blöcke I – Seitenlayout durch Positionierung von Blockelementen
11. Blöcke II – Formatierung von Blockelementen

Referenzen

• HTML Referenz als PDF-Dokument
• HTML Referenz als MS Word-Dokument

Tools

• SubthaEdit und Phase 5 kostenlose Quellcodeeditoren für Mac und Windows
• J Edit: kostenloser Quellcode-Editor mit Code-Highlighting, Unterstützung unterschiedlicher Programmiersprachen, PlugIns (z.B. JTidy) und aller gängigen Betriebssysteme mit Java.
• FireFox: kostenloser Browser für Mac, Windows und Linux mit diversen PlugIn-Erweiterungen, darunter WebDeveloper Toolbar und EditCSS.
• Simple CSS: kostenloser CSS Editor für Mac und Windows.

Links

SelfHTML – HTML Handbuch

CSS Zen Garden – Design Showcase

A List Apart – HTML und CSS Magazin

• Article: Block Layout without Tables
• Article: Horizontal Drop Down Menu

Zeldman – Internet Guru und Coder

Eric Meyer – CSS Profi

CSS Beauty – CSS Design Showcase

Einfach für alle – Barrierefreiheit im Internet