HTML

Es gibt soviele Seiten im Internet, auf denen man veraltete Informationen zur HTML-Programmierung bekommt. Hier ein paar von den besseren Quellen, falls man lieber modernes (X)HTML programmiert:

• Selfhtml.de : Die beste Anleitung im Netz zu allen HTML-Befehlen. Wer anfangen will HTML zu programmieren muss sie lesen. Aber auch zu fortschrittlichen Dingen steht hier alles. Ausserdem frei downloadbar, so dass man es sich sparen kann andere HTML-Bücher zu kaufen.
• XHTML 1.1 - Conformance Definition : W3C-Vorschlag für das Grundgerüst einer gültigen XHTML 1.1 - Datei.
• Der einzige Browser, der mit dem obigen Vorschlag nix anfangen kann ist natürlich der IE6 von Microsoft . Dieser enthält einen ganz üblen Bug, den sogenannten "xml-Declaration-Bug" (Opera "emuliert" diesen Bug allerdings auch bis zur Version 7.1), siehe dazu:
  • iX-Artikel von März 2004
  • Rendering Mode and Doctype Switching
  Am besten also statt der xml-Declaration zur Festlegung des Schriftsatzes lieber einen META-TAG z.B.:

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  nach der DOCTYPE-Definition verwenden. Ist auch standardkonform.
• W3C Core Styles : Wer zunächst keinen Bock oder Angst davor hat sein eigenes CSS-File zu schreiben, kann ja erstmal eines von den Standard-Layouts des World Wide Web Consortiums verwenden. Die müssen funktionieren, schliesslich haben die CSS erfunden.
• Image-Replacement : Sehr nützlicher CSS-Trick. Verwende ich auch auf dieser Seite, allerdings wende ich ihn auf "<span>"-Elemente an. Eine verbesserte Version des sogenannten Fahrner Image Replacement.
• Round Corners : Für alle die sich fragen (so wie ich), wie man mit CSS Boxen mit Schatten und abgerundeten Ecken hinbekommt ohne Tabellen zu benutzen.
• Menü im MacOS X Dock Style : Für alle, die wissen wollen, wo ich mir mein schickes Submenü auf diesen Seiten hier her habe.
• Die einzige immer funktionierende Möglichkeit (bis jetzt) mit CSS allgemeine Elemente zu zentrieren, ohne diesen explizit eine Breite vorzugeben, ist diese in eine Tabelle mit einer Zeile und Spalte einzuschliessen. Eine andere Möglichkeit, nämlich "display:table;" zu benutzen funktioniert leider mal wieder nicht im IE6. Andere Möglichkeiten und deren Probleme werden z.B. auf folgenden Seiten behandelt:
  • Table Centering Test
  • Center with CSS
• Viele nützliche CSS-Tricks und interessante Links zusammengefasst findet man auch im Praktikumsbericht.ppt von Olga Syasina. Vielen lieben Dank Dir dafür! ;-)

Weitere interessante und eventuell nützliche Seiten:

• css Zen Garden
• CSS fractatulum.net
• Web Tutorials
• Rounding Tab Corners
• CSS and Images
• Sliding Doors of CSS
• Sliding Doors of CSS, Part 2
• Working with alternative Style Sheets
• Build a PHP Switcher

HTML include

Wenn man mehrere HTML-Seiten mit ein und derselben Navigationsleiste hat und keine Frames benutzen will, muß man bei Änderungen an der Navigationsleiste gewöhnlich sämtliche Dateien editieren. Dies ist sehr mühsam. Wäre es nicht besser, einfach die Navigationsleiste nur einmal editieren zu müssen und die Änderungen werden dann automatisch in alle anderen HTML-Seiten übernommen? Genau dazu gibt es das sehr nützliche Java-Tool HTML include von Andreas Tetzl. Statt alle Dateien zu editieren, genügt es eine Vorlage (Template) mit der Navigationleiste zu erstellen. Aus dem Template und den Webseiten ohne Navigationsleiste (Quelldateien) erzeugt HTML include dann die kompletten Webseiten mit Navigationsleiste. Dabei ist es sogar möglich, abhängig vom Dateinamen der Quelldatei unterschiedliche Navigationsleisten einzufügen, so dass man die gerade aktuelle Seite in der Navigationsleiste z.B. farblich kennzeichnen kann.

Es gibt natürlich Alternativen zu diesem Tool:

• Server Side Includes (SSI), PHP und Co.: Der Vorteil dieser Lösung besteht in der wesentlich höheren Flexibilität gegenüber HTML include und für aufwendige dynamische Seiten kommt man nicht daran vorbei. Natürlich um den Preis einer sehr hohen Einarbeitungszeit. Der große Nachteil von SSI jedoch ist, dass man die Seiten auf dem lokalen Rechner nur betrachten kann, wenn man einen Webserver wie Apache installiert hat, oder einen sogennannten SHTML-Viewer verwendet. Auch benötigt ein Server zum Anzeigen von mittels SSI oder PHP erzeugter dynamischen Webseiten natürlich mehr Rechenzeit als beim bloßen Anzeigen statischer Seiten. Die mit HTML include generierten Seiten hingegen kann man einfach auf eine CD brennen und mit jedem Browser betrachten.
• Einsatz spezieller HTML-Entwicklungsumgebungen wie z.B. der HTML-Editor phase5. Der Nachteil ist, dass es diesen Editor nur für Windows gibt und man sich damit auch auf einen Editor festlegt. Andere Entwicklungsumgebungen sind meist ebenfalls nur für ein Betriebssystem erhältlich und zudem nicht kostenlos.

HTML include dagegen ist kostenlos, quelloffen und da es es in Java programmiert ist, sogar plattformübergreifend zu verwenden. Daher ist meiner Meinung HTML include für eine einfache Homepage die perfekte Lösung.

Bildergalerie mit (X)HTML und CSS

Die meisten Bildergalerien im Netz benutzen Tabellen mit einer festen Anzahl an Spalten um die "Thumbnails" anzuordnen und werden zudem auch meist mit uraltem HTML generiert. Mit XHTML und CSS ist es jedoch heutzutage möglich, auf Tabellen als Layoutelelement zu verzichten, und somit Bildergalerien mit einer flexiblen Anzahl an Spalten zu erzeugen. Jedoch findet man im Netz praktisch keine Bildergalerie, die dies auch umsetzt. Daher soll hier einmal kurz skizziert werden, wie dies mittel XHTML und CSS erreicht werden kann und man Bildergalerien erzeugen kann, wie sie auf meiner Seite unter Privat sehen kann.

Das grundsätzliche Layout mittels XHTML und CSS ist auf "brandnewbox" beschrieben. Um jedoch nicht jede Seite per Hand schreiben zu müssen, benötigt man einen flexiblen Generator. Dazu bietet sich Photoshop (ab Version 7) an, denn in Photoshop kann jeder seine eigenen Vorlagen erzeugen, was z.B. hier oder auch hier beschrieben wird. Eine Vorlage, welche das unter "brandnewbox" beschriebene Layout umsetzt, habe ich für Photoshop entworfen und diese kann jeder hier ( css.zip ) von meinen Seiten herunterladen. Um damit erfolgreich eine Bildergalerie zu erzeugen sind folgende Schritte notwendig:

1. Die heruntergeladene Datei "css.zip" in das Photoshop-Vorlagen-Verzeichnis entpacken, welches typischerweise unter

   \Program Files\Adobe\Photoshop\Presets\WebContactSheet

   zu finden ist.
2. Nach Aufruf von Photoshop sollte jetzt im Menü unter "Automate/Web Photo Gallery" unter Styles "CSS" aufrufbar sein. Diese auswählen, die gewünschten Optionen einstellen, wobei als Thumbnailsize "Medium", 75 Pixels gewählt werden sollte, und die Bildergalerie in einem Verzeichnis erstellen lassen. Das Ergebnis wird jedoch zunächst enttäuschend sein, denn es fehlen noch ein paar Dinge, die man leider per Hand nacharbeiten muß:
   1. Man muß das Verzeichnis "design", welches unter "Photoshop\Presets\WebContactSheet\CSS" liegt, per Hand in das Verzeichnis, in dem man die Galerie erstellt hat, kopieren. Photoshop macht dies leider nicht automatisch und so kann der Browser die benötigte CSS-Datei zunächst nicht finden und zeigt nur das reine XHTML an, so dass obige Kopieraktion nötig ist.
   2. In der Datei "index.html" müssen zusätzlich mithilfe eines Editors jedes Auftauchen von (" durch ( bzw. jedes Auftauchen von ") durch ) ersetzt werden. Die meisten Editoren verfügen über eine Suchen/Ersetzen-Funktion, so dass dies nicht weiter dramatisch sein sollte. Grund ist, dass Photoshop in den Vorlagendateien jeden Dateinamen grundsätzlich in Anführungszeichen übergibt. Da die Thumbnail jedoch mittels

      background-image: url(%THUMBNAILSRC%)

      eingefügt werden, sind Anführungszeichen hier im Pfad anstelle von %THUMBNAILSRC% überflüssig bzw. sogar falsch. Daher müssen die Anführungszeichen, welche innerhalb der Klammern bei url(...) stehen, nachträglich entfernt werden, ansonsten findet der Browser die Thumbnails nicht.

Nach Durchführung dieser Schritte sollte man jetzt eine Bildergalerie wie hier sehen.
P.S.: Die an das Layout meine Homepage angepasste Vorlage für Photoshop, mit der ich die Bildergalerien unter Privates erzeugt habe, gibts hier ( aqua.zip ). Die Pfade für die CSS-Dateien sind jedoch nicht angepasst, so dass man die Dateien unter "design" in das zweifach-übergeordnete Verzeichnis kopieren muß.