Tipps & Tricks: HTML

Viele Homepages basteln ihre Layouts mittels Tabellen zusammen, auch und gerade diejenigen, die mit Programmhilfe erstellt werden. Diese scheinbare Arbeitsvereinfachung wird mit massiven Nachteilen erkauft:

• Der Quellcode der Datei wird enorm aufgebläht und (mit teilweise auch noch verschachtelten Tabellen) ziemlich unleserlich.
• Design und Inhalt liegen gemischt in einer einzigen Datei, eine Layoutänderung oder gar die Anpassung an verschiedene Fenstergrößen werden zu einer mittleren Katastrophe.

Es gibt noch mehr Gegenargumente wie die Probleme von Screenreadern für lesebehinderte Menschen, aber das sollte schon reichen. Dabei ist die Alternative längst vorhanden und einfachst zu benutzen: das div-Element, vor allem im Zusammenhang mit CSS (Cascading Style Sheets). Um ein Logo oben links zu positionieren, schreiben Sie irgendwo in der Datei einfach:

Wohlgemerkt: irgendwo! Durch die absolute Positionierung können Sie genau bestimmen, wo die linke obere Ecke des Logos liegen soll, das Herumprobieren mit den Tabellenrändern entfällt. Das Logo soll rechts oben liegen? Macht nix:

Damit ist seine rechte Kante 40 Pixel vom rechten Browserrand entfernt. Wenn Sie die style-Angaben auch noch in CSS-Dateien auslagern, sind Inhalt und Design sauber voneinander getrennt, sie können also durch einfachen Wechsel der StyleSheets das gesamte Layout neu organisieren. Lesen Sie dazu den Tipp "Stylesheets benutzen!".

Eine gute Homepage zeigt im Browser neben dem URL ein kleines Bild an, das sogenannte FavIcon (Favorites Icon). Dessen Einbindung ist relativ einfach:

Allerdings muss diese Grafik im Icon-Format gespeichert sein, was nicht jedes Grafikprogramm beherrscht, gegebenenfalls suchen Sie in Google nach "Icon-Editor".

Bevor Sie anschließend unnötig frustriert sind: zwar hat der MSIE das FavIcon erfunden, aber gerade dort funktioniert es nur dann, wenn Sie die betreffende Seite auch in Ihre Favoriten aufgenommen haben (und selbst dann nicht immer). Opera zeigt es korrekt jederzeit in der URL-Zeile an.

Mit spezialisierten Editoren (z.B. NetObjects, welcher die Seiten aus seiner Datenbank erzeugt) oder Servern (z.B. IIS, der ASP.NET-Anweisungen ausführen kann) lässt sich die Navigation für eine Homepage ziemlich automatisch und arbeitssparend erzeugen. Was machen Sie aber, wenn Sie nur eine "kleine" Homepage erstellen wollen, die auch Kolleg/inn/en ohne solche Programme pflegen sollen?

Dann muss es reines HTML sein, so dass zur Not jeder einfache Text-Editor als Bearbeitungsprogramm geeignet ist. Auf vielen Homepages wird dann die Navigation mühsam von einer Seite auf die nächste kopiert und muss bei Änderungen natürlich überall einzeln angepaßt werden. Mit einem kleinen Trick können Sie die Navigation aber auch für nur-HTML auslagern: mit dem IFrame-Element.

Erstellen Sie dazu eine eigene Datei "Menue.htm" nach folgendem Muster:

Wichtig ist dabei, dass die a-Tags mit target="_parent" ausgeführt werden, weil das Menü ein Kind-Element der eigentlichen Seite ist. Es wird also die Referenz des Eltern-Objekts geändert. In jeder "normalen" Seite fügen Sie dann mit diesen Zeilen das Menü ein:

Für uralte Browser (MSIE < 3.0, Opera < 5.12, Netscape < 6.0, FireFox < 1.0), die das IFrame-Element nicht kennen, gibt es einen Fehlertext.

Grundsätzlich mag es eine gute Idee sein, dieses Konzept umzukehren: also nicht das Menü als eingebetten IFrame auf jeder Seite, sondern eine einzige Hauptseite mit einem IFrame darin, welcher die wechselnden Inhalte anzeigt. Das fühlt sich gut an, hat aber zwei gravierende Nachteile:

• wie bei Frame-Elementen ändert sich die sichtbare http-Adresse nicht, ein Verweis oder ein Lesezeichen funktioniert also nicht, und
• während die Breite einfach auf 100% gesetzt werden kann, ist die Höhe immer unbrauchbar, weil Sie sich auf einen Wert festlegen müssen, aber nicht die Höhe der darin angezeigten Seite abfragen können.

Sie können dieses IFrame-Element übrigens ebenso einsetzen, um Inhalte fremder Seiten in Ihrer Seite darzustellen (soweit Sie dabei keine Urheberrechte verletzen, natürlich). Im Tipp "Diese Tipps in Ihre Homepage übernehmen" finden Sie ein entsprechendes Beispiel.

Viel weiter verbreitet als das oben genannte Konzept der IFrame-Elemente sind die "echten" Frame-Tags. Dabei besteht die geöffnete Datei nur aus Frame-Elementen ganz ohne Inhalt:

Diese Startdatei lädt drei andere Dateien mit dem eigentlichen Inhalt in eine tabellarische Struktur, die in diesem Fall so aussieht:

Inhalt = Inhalt.htm	Haupt = Home.htm
Fuss = Panorama.jpg

Der äußerste Frameset ist zeilenweise unterteilt und erfordert für die erste Zeile beliebig viel Höhe, so dass für die zweite Zeile (das Panorama) am unteren Bildrand 135 Pixel Höhe verbleiben. Die erste Zeile wiederum wird mit dem inneren Frameset in zwei Spalten aufgeteilt, deren linke (das Inhaltsverzeichnis) genau 129 Pixel breit ist und deren rechte (der wechselnde Inhalt, beginnt hier mit "Home") den übrigen Platz nutzt.

Wie Sie vielleicht bemerkt haben, muss die eingebettete Datei gar keine vom Typ "*.htm" sein, Sie können dort auch direkt ein Bild wie "Panorama.jpg" angeben. Das Inhaltsverzeichnis muss den Frame rechts oben über seinen Namen Haupt ansprechen, so dass es wie folgt aussieht:

Wenn der wechselnde Inhalt im Haupt-Frame zu groß wird, erzeugt der Browser automatisch Rollbalken (falls Sie das nicht mit scrolling="no" verhindern). Opera macht korrekt nur den senkrechten Rollbalken, weil ja der Seitenumbruch des Inhalts automatisch angepaßt wird, aber MSIE erzeugt ärgerlicherweise einen überflüssigen waagerechten Rollbalken.