Für den Home-Webdesigner
Hyper Text Markup Language
zurück

 
Tipps und Tricks

HTML ist eine Dokumentenbeschreibungssprache und keine Programmiersprache, denn hier werden nur logische Strukturen eines Dokuments beschrieben und kein Programm im eigentlichen Sinn erstellt. Daraus resultieren auch die unterschiedlichen Darstellungen von Webseiten in verschiedenen Browsern.
Die häufigsten Browser (Internet Explorer, NN - später Mozilla Firefox, Safari, Opera) haben teilweise erhebliche Unterschiede in der Darstellung der HTML Seiten, zumindest in den älteren Versionen. Das liegt an dem verwendeten Standard, der bei den einzelnen Browsern unterschiedlich ist.
(Ab der Versionsnummer 6.0 bei MSIE und NN hat man den geforderten HTML4.0 Standard vollends implementiert.) Da aber sehr viele User auch noch ältere Rechner und somit auch ältere Browserversionen benutzen, viele auch unterschiedliche Bildschirmauflösungen eingestellt haben, sollte man beim Erstellen von HTML Seiten einige Regeln beachten, will man ein möglichst breites Spektrum von Besuchern eine allseits gutaussehende Seite anbieten.

Aus meinem Erfahrungsbereich mit den verschiedensten Browsern (MSIE, NN, Opera, Firefox u.a.) hier einige Tipps:

allgemeine Tipps:
  • die Inhalte der Seite sind entscheidend für das Layout (hat man sehr viele Inhalte zu vermitteln, kann man auf überflüssige und meist aufwendige Effekte verzichten und die Seite klar strukturieren; hat man nur wenige Inhalte, kann man auf Effekthascherei kaum verzichten. Diese Seiten sehen meist sehr gut aus, laden aber zum erneuten Besuch kaum ein) 
  • fertige Seite vor dem Upload immer in den wichtigsten Browsern (MSIE, NN, Opera, Firefox u.ä.) betrachten
  • Die Ladezeit einer Seite spielt heute bei normalen DSL-Geschwindigkeiten keine große Rolle mehr. Trotzdem sollte die Ladezeit bei angenommener niedrigster DSL-Rate eine Minute nicht übersteigen. (besser weniger)
  • in Dateinamen keine Umlaute oder Leerzeichen verwenden und am besten alles in Kleinschreibung (durch Windows ist dieses zwar ohne Fehlermeldung möglich, aber die Server sind in der Regel Unix basiert und können meist keine Leerzeichen und Umlaute verwalten, außerdem kann man Pfadfehler durch doppelte Dateien erzeugen z.B. durch eine solche Angabe 'bild.jpg' oder 'Bild.jpg')
  • Unterverzeichnisse mit einer einfachen Startseite (z.B. index.htm oder auch default.htm) mit Weiterleitung und extra Hyperlink zur eigentlichen Hauptseite schützen (sonst wird bei einer absoluten Adresseingabe z.B. www.meine-internetadresse.de/images/ der gesamte Inhalt des Ordners images im Browser angezeigt)
  • bei Verwendung von Frames immer eine Noframe Version mit Links auf die einzelnen Unterseiten erstellen (dadurch haben User mit Browsern, die keine Frames darstellen können, auch eine Chance ihre Seite zu besuchen)
  • Textmarken zum Seitenanfang (z.B. <a name="top"></a>) direkt unter dem Body-Tag installieren (damit wird beim Anspringen auf diese Marke ein Scrollen der Seite bis zum wirklichen Anfang erreicht. Sehr viele HTML-Editoren setzten diesen Tag automatisch in die erste Tabelle oder innerhalb der Ersten Schriftfont-Tags; dadurch scrollt die Seite nicht ganz bis nach oben).
  • generell eine Hintergrundfarbe festlegen (nicht alle Browser haben einen weißen Hintergrund als Voreinstellung)
  • auf einen guten Programmierstil und richtige Syntax achten (z.B. Adobe GoLive setzt manchmal zwischen den Attributen im <body> Tag mehrere Leerzeichen hintereinander und darauf reagieren einige ältere Browser fehlerhaft und die Seite wird nicht angezeigt; oder fehlt aus irgendeinem Grund der </html> Tag, wird die Seite in älteren Browsern nicht angezeigt
Bilder:
  • Bilddateien möglichst klein halten, um die Ladezeiten nicht unnötig zu erhöhen
  • bei Bildergalerien von den einzelnen Bildern sog. 'Daumennägel' (kleine Kopie des Bildes z.B.  92x92 Pixel) erstellen, diese in die Seite integrieren und mit dem Originalbild verlinken
  • bei einem Hyperlink mit einer Schaltflächen darf im Quelltext der </a> Tag nicht allein in einer neuen Zeile stehen (bei manchen Browsern ist sonst hinter dem Schaltflächenbild ein kleiner Unterstrich zu sehen.)
  • bei Hintergrundbildern einen passenden Farbton als Hintergrundfarbe festlegen (es gibt User, die das automatische Laden der Grafiken ausgeschaltet haben um die Ladezeiten zu verkürzen und dann muss die Seite auch noch ansehnlich sein)
Schriftarten:
  • keine extravaganten Schriftarten verwenden (die verwendeten Schriftarten müssen beim Betrachter auf dem Rechner vorhanden sein, sonst benutzt der Browser die im System eingestellte Schriftart; damit kann die Seite aber ganz anders aussehen)
  • bei Zahlen mit dazugehörigen Maßeinheiten oder Text (z.B. 20 cm, 25 Jahre o.ä.) zwischen Zahl und Text ein festes Leerzeichen verwenden (bei einem möglichen Textumbruch an dieser Stelle wird die Zahl in die neue Reihe mit umgebrochen) 
  • am Ende eines Textes (auch in einer Tabellenzelle) generell einen Zeilenumbruch <br> setzen (beim manchen Browsern entsteht sonst zwischen der letzten und der vorletzten Zeile ein größerer Zwischenraum)
Tabellen
  • feste Tabellen-, Spalten- oder Zellenbreiten wenn möglich nicht verwenden (immer an verschiedene Bildschirmauflösungen denken 800x600, 1024x768, 1152x864, 1280x1024, 1600x1200), oder prozentuale Aufteilungen wählen, oder
  • die ganze Seite in eine Tabelle einbinden und eine feste Breite zentriert festlegen (dadurch erreicht man, dass das Seitenlayout auch bei höheren Bildschirmauflösungen gewahrt bleibt)
  • prozentuale Tabellenbreiten  werden von Opera nicht korrekt interpretiert, wenn der Inhalt nicht mindestens diese Breite ausfüllt (stattdessen wird dort die Breite des Inhaltes als Tabellenbreite abgenommen)
  • farbige Tabellenränder werde von den Browsern unterschiedlich dargestellt.
  • normale Textabsätze am besten in Tabellen schreiben (hier kann man Texte über Zellen und Spalten gut formatieren und für alle möglichen Browser- und Bildschirmeinstellungen fixieren.)
  • Bilder und Texte nach Möglichkeit in Tabellen einbinden, aber in getrennten Zellen (Bei positioniertem Bild kann bei wenig Text und großer Auflösung der nächste Absatz schon neben das Bild rücken. Bei Bildern und Text in einer Zelle möglichst das Bild links, weil bei manchen älteren Browsern bei rechter Positionierung des Bildes manchmal etwas Text hinterm Bild verschwindet.)
  • Bildhintergrund bei Tabellen neutral wählen (MSIE erzeugt das Bild für die gesamte Tabelle, einige andere Browser erzeugen das Bild für jede Zelle neu, d.h. in jeder Zelle wird das gesamte Bild geladen und das hat meist einen unerwünschten optischen Effekt)
  • in leere Tabellenzellen ein festes Leerzeichen als Platzhalter einfügen (bei manchen Browsern wird sonst der Tabellen-/Zellenrahmen nicht korrekt dargestellt)
Cascading Stylesheets (CSS)
  • bei Verwendung von CSS auf die Funktion in den einzelnen Browsern prüfen (Die älteren Browser haben CSS manchmal unvollständig und in verschiedenen Sprachversionen implementiert und können nicht alle Attribute richtig darstellen. Bei modernen Browsern ist CSS inzwischen aber voll integriert)
  • bei ausgelagerten Stysheets (im Header mit <link rel="stylesheet" type="text/css" href="style.css">) darauf achten, dass diese auch richtig interpretiert werden, wenn sie nicht im gleichen Verzeichnis wie die Datei liegen (z.B. die Pfadangaben innerhalb von CSS).
  • Schriftformatierungen mit CSS funktionieren allgemein gut
    (Ausnahmen sind: font-variant, font-stretch, word-spacing, letter-spacing, text-shadow)

  • Ausrichtung und Absatzkontroplle funktionieren ebenfalls gut
    (mit Ausnahme von white-space)

  • bei Hintergrundbildern in Tabellen darauf achten, dass einige ältere Browser das background-image nur richtig interpretieren, wenn es nur in der Datenzelle implementiert ist, (d.h man muss das Hintergrundbild auch so wählen, dass es auch nebeneinander in Datenzellen gut aussieht )
  • Vorsicht bei Formatierungen mit DIV Die neueren HTML Editoren haben den CSS 2.0 Standard implementiert, bei dem die Formatierungen mit DIV für beliebige Objekte mit CSS verwendet werden (inzwischen allgemeiner HTML-Standard). Diese können ältere Browser aber manchmal nicht korrekt darstellen.
Scripte und Objekte
  • bei Verwendung von JavaScripten darauf achten, dass die Seite auch ohne diese Scripte funktioniert (es gibt ältere Browser, die kein oder nur wenig JavaScript interpretieren können, außerdem deaktivieren etliche User JavaScript auf ihrem Rechner, um sich vor Viren und unerwünschter Werbung zu schützen.)
  • ausgelagerte Scripte in sogenannten Script-Containern in den gängigen Browsern prüfen (es gibt einige wenige Scripte, die funktionieren nur einwandfrei, wenn sie direkt im HTML-Quelltext geschrieben stehen)
  • Java-Applets sparsam verwenden (diese haben zwar einen großen visuellen Effekt, sind aber nur wenig Informativ und sorgen aber für viel Datentransfer, außerdem ist bei den meisten Browsern Java aus Sicherheitsgründen standardmäßig deaktiviert)
  • die Einbindung von Multimedia-Objekten (Video, Sound etc.) in Internetseiten ist erst ab HTML 4.0 standardisiert. (d.h. dass die verschiedenen älteren Browser diese gar nicht oder nur mit einigen im Quelltext definierten "Tricks" interpretieren können. Diese verschiedenen "Tricks" werden aber oft von den neueren Browsern nicht übernommen; es bleibt also vorläufig eine Gratwanderung zwischen einer Top-Multimedia-Seite und einer für alle interpretierbaren Seite; außerdem stellen sehr viele User die Lautsprecher ab, weil ihr der ständige klick-sound lästig wird)
  • Große Musik- und Sounddateien im *.WAV Format werden von allen Browsern erkannt und auch interpretiert. Jedoch kommt es beim MSIE oftmals zu Fehlermeldungen und die Datei wird nicht geladen, weil diese als Sicherheitsrisiko eingestuft werden. 
    (Diese Dateien werden geladen, wenn man in den Einstellungen der Internetoptionen die Sicherheitsstufe auf 'Niedrig' einstellt. Man sollte aber anschließend die ursprüngliche Einstellung zurücksetzen!)


Netscape-Farbpalette (216 Farben)

Die Beschriftungen zeigen, welchen Hexadezimalnotationen entsprechend der Syntax von HTML und CSS die jeweiligen Farben entsprechen.

#000000 #000033 #000066 #000099 #0000CC #0000FF
#330000 #330033 #330066 #330099 #3300CC #3300FF
#660000 #660033 #660066 #660099 #6600CC #6600FF
#990000 #990033 #990066 #990099 #9900CC #9900FF
#CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF
#FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF
#003300 #003333 #003366 #003399 #0033CC #0033FF
#333300 #333333 #333366 #333399 #3333CC #3333FF
#663300 #663333 #663366 #663399 #6633CC #6633FF
#993300 #993333 #993366 #993399 #9933CC #9933FF
#CC3300 #CC3333 #CC3366 #CC3399 #CC33CC #CC33FF
#FF3300 #FF3333 #FF3366 #FF3399 #FF33CC #FF33FF
#006600 #006633 #006666 #006699 #0066CC #0066FF
#336600 #336633 #336666 #336699 #3366CC #3366FF
#666600 #666633 #666666 #666699 #6666CC #6666FF
#996600 #996633 #996666 #996699 #9966CC #9966FF
#CC6600 #CC6633 #CC6666 #CC6699 #CC66CC #CC66FF
#FF6600 #FF6633 #FF6666 #FF6699 #FF66CC #FF66FF
#009900 #009933 #009966 #009999 #0099CC #0099FF
#339900 #339933 #339966 #339999 #3399CC #3399FF
#669900 #669933 #669966 #669999 #6699CC #6699FF
#999900 #999933 #999966 #999999 #9999CC #9999FF
#CC9900 #CC9933 #CC9966 #CC9999 #CC99CC #CC99FF
#FF9900 #FF9933 #FF9966 #FF9999 #FF99CC #FF99FF
#00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF
#33CC00 #33CC33 #33CC66 #33CC99 #33CCCC #33CCFF
#66CC00 #66CC33 #66CC66 #66CC99 #66CCCC #66CCFF
#99CC00 #99CC33 #99CC66 #99CC99 #99CCCC #99CCFF
#CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF
#FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF
#00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF
#33FF00 #33FF33 #33FF66 #33FF99 #33FFCC #33FFFF
#66FF00 #66FF33 #66FF66 #66FF99 #66FFCC #66FFFF
#99FF00 #99FF33 #99FF66 #99FF99 #99FFCC #99FFFF
#CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF
#FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF

Für Vorschläge zur Erweiterung und Verbesserung des kleinen Lexikons bin ich stets dankbar.
Tel./Fax: 033458/265 oder e-Mail an: info@modus-dancing.de

                   Seitenanfang