 |
Für den Home-Webdesigner
HTML 4.0 Dokumentation
Hyper Text Markup Language |
 |
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 beiden häufigsten Browser, der Internet Explorer (MSIE) und der Netscape
Navigator (NN), 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 sollte bei einer angenommenen
Modemgeschwindigkeit von 28,8 eine Minute nicht übersteigen (besser
weniger)
- in Dateinamen keine Umlaute oder Leerzeichen
verwenden und am besten alles in Kleinschreibung (durch Win 9x
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 (MSIE
hat einen weißen Hintergrund als Voreinstellung und NN einen
grauen)
- 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 im NN 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 (beim
NN 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 NN 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 640x480, 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 korrekte 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
im NN 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, NN erzeugt 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, die Sprachversion 1.0 wird aber recht
gut interpretiert)
- bei ausgelagerten Stysheets (im Header mit
<link rel="stylesheet" type="text/css" href="style.css">)
darauf achten, dass NN 4.x die Styles nur richtig interpretiert,
wenn sie im gleichen Verzeichnis wie die Datei liegen.
- 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 NN 4.x generell das background-image nur richtig
interpretiert, 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 nicht korrekt darstellen und solche
Seiten sind auf diesen unansehnlich und funktionieren schlecht oder
gar nicht.
|
| 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 aus Angst vor Viren)
- ausgelagerte Scripte in sogenannten
Script-Containern in beiden 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 interpretieren nur die
neueren Browser diese auch fehlerfrei)
- 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
|