html.pages.de

the DONTs of HTML in 1995

ein kleines zeitdokument - was man 1995 alles falsch machen
konnte beim design einer website. ich habe die punkte, die
heute noch wenigstens teilweise relevant sind in schwarz
eingefärbt (womit ich gegen die schwarz/weiss-Regel verstoße ;-))

    Teil 1: Grundlagen

  1. Beim Zugriff per Verzeichnisname (welcher an sich elegant ist, da kürzer) den abschliessenden Slash vergessen Falsch: http://somewhere.edu/~user Richtig: http://somewhere.edu/~user/ Verursacht einen HTTP Redirect auf die korrekte Adresse, welcher den Benutzer 2 Paket-round-trip Zeiten unnötig warten lässt.
  2. Anführungszeichen vergessen, typischerweise in Hyperlinks Falsch: <a href=¨mypage.html> Netscapes < 2.0 lassen Schusselfehler wie diesen gerne durchgehen; mit den meisten anderen Browsern ist evtl. die ganze Seite unbenutzbar.
  3. Link nicht beendet Falsch: <a href="mypage.html">My cool page<a> Richtig: <a href="mypage.html">My cool page</a> Wenn man mehrere Links hintereinander auflistet, kann sich schnell solch ein Fehler einschleichen, den man erst beim durchprüfen der Links bemerkt!
  4. Whitespace im Anchor Falsch: <a href="http://irgendwo.in.timb.uk/tu/"> <img src="kuhl.gif" width=200 height=100 alt="[kuhles bild]" border=0></a> Richtig: <a href="http://irgendwo.in.timb.uk/tu/" ><img src="kuhl.gif" width=200 height=100 alt="[kuhles bild]" border=0></a> Eine Leerzeile gilt nunmal als Freiraum, und wird als kleiner farbiger Fleck links neben dem kuhlen Bild dargestellt. Dies vermeidet man durch solche obszöne Tricks, wie das Abschluß-">" des Tags auf die nächste Zeile zu stellen; Hauptsache direkt vor dem <img...
  5. Schluß-Tags innerhalb Table-Elementen vergessen Falsch: <td><b>DM 120.-</td> Richtig: <td><b>DM 120.-</b></td> Leuchtet ein, und dennoch kann sich solch ein Schussel- fehler einschleichen, da Netscape ab 1.1 dazu nichts sagt. Aber wehe man greift zu Netscape 1.0! <!-- Kommentar 2002: Solche Fehler sind unschön aber nicht mehr dramatisch, da kaum ein Webbrowser heutzutage noch ein derart dummes Parsing macht solche Fehler nicht zu erkennnen. -->
  6. Groß/Klein-Schreibung von Dateinamen Falsch: <a href="PKUnZip.EXE">PKUnZip.EXE</a> Richtig: <a href="pkunzip.exe">PKUnZip.EXE</a> Dateinamen-Schreibweise ist in Unix und in HTTP bedeutungsvoll! Da Dateien, die aus der DOS-Welt kommen, im WWW dann i.d.R. in Kleinbuchstaben übertragen werden, müssen Zugriffe darauf entsprechend geschrieben werden - Auch wenn es beim file: Zugriff auf dem eigenen PC noch funktioniert.

    Teil 2: Farben und Grafik

  7. Schräge Hintergrundfarben in bgcolor Falsch: <body bgcolor=#c070c0> Richtig: <body bgcolor=#ff7f00> NS zeigt bei einfachen oder falsch eingestellten VGA- Karten solche Hintergrundfarben durch zweifelhafte Dithermuster dar, welche Text vollkommen unlesbar machen. Abhilfe ist, Systemfarben zu verwenden (RGB Werte nur aus 00, 7f und ff zusammenstellen), oder Backgroundbilder - da kommt ironischerweise ein schlauerer Algorythmus zum Zug.
  8. Nicht-B/W- oder gar nicht-grayscale-konforme Farbwahl Falsch: <body bgcolor=#ff0000 text=#000000> Richtig: <body bgcolor=#ff0000 text=#c0c0c0> Man sollte nicht unterschätzen, wie viele Studenten wie Profs in den Unis an schwarz-weissen Grafikbildschirmen sitzen. Diese erhalten im oberen Fall schwarze Schrift auf schwarzen Grund. Die S/W-Algorythmen schalten ab etwa ein Drittel Helligkeit auf weiß. Bei diesem Beispiel sieht man sogar auf vielen Graustufenmonitoren nichts, da der Rot-Kanal nicht zum ermitteln der Graustufe verwendet wird. Ziemlich peinlich sowas. Vorsicht auch bei entsprechenden Background-Bildern.
  9. Interlace'tes Background-GIF

    Interlace'te GIFs sind ja ein netter Effekt dann und wann, aber sie werden immer langsamer verarbeitet als Normale - beim Hintergrund ist das eine total unnötige Verzögerung, da viele Clients, auch Windows-NS, erst das fertige Resultat zeigen. Ausnahme jedoch der NS unter einigen populären Unixen: dort wird der Aufbau tatsächlich dargestellt - und braucht dafür typischerweise 1-2 Minuten. It's a bug, not a feature.

  10. Transparentes GIF mit weißen Rändern

    Wenn man einen Grafiker beauftragt, GIFs zu machen, welche man dann mit giftrans transparent machen will, sollte man diesem sagen, auf welcher Hintergrundsfarbe die Grafik plaziert werden wird. Sonst werden seine schönen PhotoShop-Schatten und Anti-Aliasing-Typographien einen weißlichen Rand aufweisen, weil fast alle Grafiker mit weißem Hintergrund arbeiten. Wenn's schon zu spät ist, hilft nur noch die Nachbearbeitung der Farbtabellen, oder das Weiß kurzerhand zur offiziellen Hintergrundsfarbe deklarieren. Viele Sites sind letzteren Weg gegangen.

  11. Die Tücke mit den Imagemaps

    Sie ist eigentlich recht naheliegend: Mit nicht-grafischen Browsern sind sie unbenutzbar - wer seine Homepage aus einer einzigen Imagemap aufbaut schließt alle Studenten, die heute noch an IBM Großrechnern oder VT100-Terminals sitzen müssen, aus. Dabei liest sich so mancher Web-Text auf den alten Terminals angenehmer als auf nem Windoofs-PC! Es gibt jedoch Abhilfe: Man verbessere das Imagemap-CGI dahingehend, daß nicht-Grafik-User auf eine text-only Seite wechseln können.

    Teil 3: Populäre Fehlinformation

  12. Die große Legende vom &uml; Richtig: M&uuml;nchen Auch richtig: München HTML+HTTP sind per Definition ISO-Latin-1 konform! Die &umls wurden nur erfunden für jene Leute, die keine Umlaute auf der Tastatur haben! Mit der richtigen Software können nicht nur Windoofs, sondern auch Mac-User Umlaute direkt eintippen. z.B. mit NCSA telnet! Nie wieder ä durch &auml; oder ß durch &szlig; ersetzen!
  13. Superpopulärer Schönheitsfehler: Listenelement mit Space Falsch: <li> Article #1 Richtig: <li>Article #1 Es ist unlogisch, aber wahr. Wer dort einen Space einfügt erhält als Effekt, daß bei Line-Wrap die nächste Zeile nicht auf die gleiche Stelle einrückt. Wie gesagt, Schönheitsfehler. Sogar automatische irgendwas-to-HTML Converter erzeugen oft solchen eigentlich inkorrekten Code.
  14. Vertrauensvoll die Kommentar-Syntax einsetzen Richtig: <!-- <li>Alter Eintrag --> Besser: <!-- <li)Alter Eintrag --> Bemerkt? Ich habe das > durch ein anderes Zeichen ersetzt, weil es noch viel zu viele Clients gibt, welche SGML- Kommentare nicht korrekt verarbeiten. Also stets vorsichtig mit dem auskommentieren von HTML-Code!!
  15. Fehler durch zuviele HTML, HEAD, BODY und DOCTYPE Elemente Falsch: <html><head> <body background=cool.gif> <title>Cool Title</title> Richtig: <title>Cool Title</title>... <body background=cool.gif> HTML sieht einen Head und einen Body-Bereich vor, welche unbedingt nicht durcheinander gebracht werden sollten. Ein <title> nach dem <body> könnte ignoriert werden, so wie Text, welcher nach einem </body> erst erscheint. Überhaupt ist es GAR NICHT NOTWENDIG die redundanten <html>, <head> und <body> Elemente zu verwenden - alle HTML Specs besagen, daß diese Elemente FEHLEN DÜRFEN! Ich empfehle geradezu sie NICHT zu verwenden, da sie Ballast und allzu oft Fehlerquellen sind! Am Besten jede Datei mit <title>..</title> beginnen, <body ...> in der zweiten Zeile und ab dann fröhlich loshacken.

    Teil 4: Gewagte Experimente

  16. Formulare halb in, halb außerhalb von Tabellen Falsch: <table>.... <form ... </table></form> ... bringt einige Netscapes < 2.0 zur totalen Bauchlandung. Bei Mischformen am Besten unter mehreren Plattformen durchtesten!
  17. Netscape-IMG-Features in Tabellen verwenden wollen Falsch: <table>... <img ... align=right> ...</table> Falsch: <table>... <img ... height=99%> ...</table> Es könnte versehentlich auf Ihrem Netscape nach etwas aussehen, aber beim nächsten wird es die bombastischten Folgen haben. Solche Kombinationen hat Netscape schlichtweg nicht durchgetestet.

    Teil 5: Was in war ist nun out

  18. Netscapes IMG ALIGN=LEFT und RIGHT Ok: <img align=left ...>Langer Paragraph Text... Besser: <table><tr> <td><img ...></td> <td>Langer Paragraph Text...</td> </tr></table> Beim Erscheinen von NS1.0 war es supercool Text um Bilder fliessen zu lassen mittels ALIGN=LEFT oder RIGHT. Die HTML-Workgroup hat bis vor Kurzem demonstrativ diese unabgesprochene Änderung des Standards nicht hinzunehmen. Inzwischen ist TABLE besser verbreitet als IMG ALIGN=LEFT, obwohl es neuerdings doch in HTML/3 ist. Es empfiehlt sich vorerst dennoch mit Tabellen zu arbeiten.
Copyright ©1995-2095 Carlo v. Loesch