Die Geheimnisse der HTML-Profis

Eine beeindruckende Homepage zu erstellen ist nicht schwer. Man muß nur einige Tricks kennen.

Übersicht bewahren
Je mehr Information auf einer Seite konzentriert ist, desto wichtiger wird übersichtliche Gestaltung. HTML kennt dazu einige Befehle, mit denen es gelingt, die Übersicht zu bewahren.

Tabellen:
Mit Hilfe von Tabellen können Sie verschiedene Inhalte auch optisch gut voneinander trennen. Grundsätzlich werden Tabellen im Format

<table>
<tr>
<td>Inhalt der ersten Zelle</td>
<td>Inhalt der zweiten Zelle</td>
</table>

programmiert. <tr> steht für 'Table Row', beginnt also eine neue Zeile. <td> bedeudet 'Table Data' und legt den Inhalt einzelner Zellen fest.
Soweit ist der Umgang mit Tabellen vielen Benutzern vertraut. Tabellen können aber viel mehr leisten. Durch die Angabe einer Hintergrundfarbe, gewinnen Sie an Übersichtlichkeit. Ersetzen Sie doch einmal im obrigen Beispiel den <table> Befehl durch folgenden Code:
<table bgcolor="#dddddd" cellspacing="5" cellpadding="5" border="2">
Wir geben den Zellen also einen hellen Grauton als Hintergrundfarbe (bgcolor) und weisen Sie an, zwischen Text und Zellenrand bzw. zwischen den einzelnen Zellen 5 Pixel Abstand zu halten (cellspacing und cellpadding). Anschließend geben wir der Tabelle noch einen Rand der Stärke 1. Das wirkt doch gleich ganz anders, oder? Variieren sie die Werte, lassen Sie z.B. den Rand weg (border="0").
Sehr interessante Effekte lassen sich auch erzielen, indem Sie eine Zelle über mehrere "strecken". Dazu gibt es die Befehle colspan (Spalten) und rowspan (Zeilen).
Sehen Sie sich dazu die Beispiel - Grafik an.


TIP: Besondere Effekte können Sie erzielen, indem Sie mehrere Tabellen ineinander verschachteln. Jeweils eine andere Hintergrundfarbe, unterschiedliche Rahmengröße und Abstände können ganz erstaunliche Ergebnisse bringen. Vergessen Sie dabei aber nicht, daß jede Tabelle, die geöffnet wird, auch geschlossen werden muß (mit </table>) !! Sollte bei ihren Experimenten gar nichts auf dem Bildschirm zu sehen sein, haben Sie vermutlich einen oder mehrere 'Tabelle beenden' - Befehle vergessen.

Listen
Um mehrere aufeinanderfolgende Punkte klar zu unterscheiden, wurde der List - Befehl in HTML integriert. Beispiel einer Einkaufsliste:
<li> Wurst
<li> Käse
<li> Brot
Durch den Listbefehl erzeugt der Browser einen Zeilenumbruch, rückt die Inhalte in die Mitte und markiert sie, in der Standardeinstellung mit einem fetten Punkt (bullet). Sollte ihnen der Punkt zu langweilig werden, schaffen Sie Abwechslung indem Sie <li type="square"> probieren. Nun sehen Sie statt eines ausgefüllten Punktes ein Quadrat. Statt 'Square' können Sie auch 'Circle' (nicht ausgefüllter Kreis) verwenden .
Die Liste ist noch immer ein wenig unübersichtlich? Wenn Sie mit Word arbeiten, verwenden Sie, um z.B. Absätze zu formatieren, den Tabulator. Dieser ist in HTML etwas schwierig anzuwenden, als Ersatz kann man jedoch den Befehl <blockquote> verwenden. Der Code

<blockquote>
Dieser Text ist hineingerückt

<blockquote>
Und hier noch mehr
</blockquote>

</blockquote>

verschiebt den Text ein Stück in die Mitte.
Ein weiteres Stilmittel, um Inhalte voneinander zu trennen ist der horizontale Strich (<hr> horizontal row). In seiner Standardeinstellung erzeugt der Befehl einen dünnen Strich, der über die gesamte Bildschirmbreite geht. Sie können die Größe aber auch variieren, indem Sie die Breite in Prozent angeben: <hr width="50%">. Ebenfalls standardmäßig bekommt die Linie einen leichten Schattenwurf, den man durch setzen des Attributs 'noshade' ausschalten kann.

Browserkompatibilität
Der Krieg zwischen Microsoft und Netscape um die Vorherrschaft im Internet hat leider für jeden Webdesigner unangenehme Nebenwirkungen. Um dem Konkurrenten überlegen zu sein, hat nämlich jeder der beiden Browserhersteller HTML Befehle implementiert, die nur vom eigenen Produkt interpretiert werden.
Die Folge davon ist, daß ein und dieselbe Webseite, je nach Browser oft vollkommen anders aussieht. Testen Sie ihre Seite, bevor Sie sie ins Netz stellen zumindest unter Netscape 3 und 4 bzw. MS Internet Explorer 3 und 4. Sie werden überrascht sein, wieviel sich verändert!
Hier die wichtigsten Unterschiede:
· Wenn ihre Seite Frames verwendet und sie diese ohne störenden Rahmen darstellen wollen, versteht Netscape den Befehl 'border="0"'. Der Explorer braucht allerdings den Befehl 'frameborder="0"'. Nachdem unbekannte Befehle von jedem Browser einfach ignoriert werden, ist die Lösung einfach: Schreiben Sie einfach beide Befehle hintereinander. Am besten, sie verwenden folgenden Code:
<frameset cols="50%,50%" border="0" frameborder="0" marginwidth="0" framespacing="0">
So werden ihre Frames bei allen Browsern rahmenlos angezeigt.
· Unter Netscape können Sie durch <blink>Dieser Text blinkt</blink> Text blinken lassen. Der Explorer ignoriert den Befehl und behandelt den Text wie jeden anderen.
· Der Befehl <marquee> um Laufschrift zu erzeugen, funktioniert nur bei Microsoft.
· Ebenfalls nur bei Microsoft zu verwenden ist der 'Wasserzeichen - Effekt', der beim Scrollen nur den Text, nicht aber den Hintergrund bewegt.
· Besonders kraß ist die Situation bei Dynamic HTML und Style Sheets. Die beiden Browsergiganten sind hier dermaßen unterschiedlich, daß es fast unmöglich ist, eine Seite für beide zu gestalten.

DHTML kann erst von Browser der 4er Generation interpretiert werden!
· Auch Javascript wird von den Browsern teilweise unterschiedlich interpretiert. Es kann passieren, daß ein Skript, auf einem Programm einwandfrei läuft, im anderen Browser jedoch Fehlermeldungen am laufenden Band produziert. Unbedingt austesten!

Sollten Sie keinen kleinsten gemeinsamen Nenner für beide Browser finden, empfiehlt es sich, eine Abfrage mit Java Script auf der Startseite zu implementieren, die feststellt, welches System der Besucher verwendet und ihn automatisch auf die dementsprechend optimierte Startseite weiterleitet. Dies bedeutet allerdings einen nicht zu unterschätzenden Mehraufwand, da einige Seiten doppelt erstellt werden müssen.

Grafiken
Seien Sie generell eher sparsam im Umgang mit Grafiken. Viele Effekte lassen sich durch kreativen Umgang mit HTML Befehlen leichter realisieren, und verkürzen so die Ladezeit. Als Grundregel sollte gelten: Eine Seite sollte insgesamt nie mehr als 50 kB groß sein (inkl. aller Grafiken, HTML-Dateien, usw.).
Weiters ist zu beachten:
· Sie können den Seitenaufbau beschleunigen, indem Sie gleich die Größe der Grafik angeben.
Beispiel: <img src="datei.jpg" width="200" height="400">. Der Browser reserviert somit den entsprechenden Platz am Bildschirm und baut den Rest der Seite auf.
· Warnen Sie ihre Besucher bei Grafiken (oder Textdateien) über 30 kB. Jeder sollte selber entscheiden können, ob er größere Dateien laden will, oder nicht. Sie können z.B. 'Thumbnails', d.h. verkleinerte Vorabansichten anbieten, die einen Link zur Originalgrafik darstellen.
· Grafiken immer in der Größe einscannen, in der sie auch tatsächlich gezeigt werden sollen. Je größer eine Grafik ist, desto mehr Speicherplatz braucht sie. Gleiches gilt für die Farbanzahl.
Nicht jede Grafik muß unbedingt in 'True Color' Qualität dargestellt werden, oft reichen auch 256 Farben.
· Vergessen Sie nicht, im img-Befehl das Attribut alt="Alternativtext" zu setzen. Dieser Text wird angezeigt bis die Grafik geladen ist, bzw. bei Netscape 4 wenn man mit dem Cursor über die Grafik fährt. Gerade bei Navigationsbuttons kann so eine Fülle an zusätzlicher Information geboten werden.

Suchmaschinen
Um mit ihrer fertigen Seite auch von Suchmaschinen gefunden zu werden, sollten Sie folgende Punkte beachten:
· Wählen Sie einen aussagekräftigen Titel. Nichts ist schlimmer als 'Index' oder 'Homepage von XY'. Der Titel sollte schon die Schlagworte enthalten, unter denen Sie vom User gefunden werden wollen.
· Geben Sie eine gute Beschreibung ihrer Seite ein:
<meta name="description" content="Die Firma XY bietet Lösungen im Bereich EDV an."> Diese Beschreibung wird im <head>-Teil der Seite integriert und von den Suchmaschinen angezeigt. Das ist ihr Werbetext!
· Gleich unter der Beschreibung, teilen Sie der Suchmaschine Stichworte zu ihrer Seite mit: <meta name="keywords" content="stichwort1, stichwort2, stichwort3"> Bei allen Suchmaschinen müssen Sie sich anmelden, um aufgenommen zu werden. Dies geschieht mittels des 'Add URL' Links, der zumeist ganz am Ende der Seite versteckt ist.

Bildschirmgröße und -auflösung
Als Webdesigner begeht man oft den Fehler, zu glauben, daß jeder andere User das gleiche EDV - System mit den gleichen Einstellungen benutzt. Nicht wenige User benutzen einen 14 Zoll Monitor mit 640x480 Auflösung! Testen Sie ihre Seiten auf verschiedenen Systemen.
· Vor allem im Umgang mit Frames ist Vorsicht geboten. Definieren Sie einzelne Frames lieber durch Angabe der Pixel, statt durch Prozentangabe. Pixel stellen einen festen Wert dar, sind daher Prozentenangaben vorzuziehen. Die Framedefinition für eine Navigationsleiste und ein Hauptfenster könnte also folgendermaßen aussehen:
<frameset cols="200,*">
Das Navigationsframe hat fix 200 Pixel, das Hauptfenster den Rest (der Stern * ist eine 'wildcard').
· Achten Sie darauf, daß man bei Tabellen, Grafiken oder definierten Absätzen nicht horizontal Scrollen muß. Das vermindert die Lesbarkeit einer Seite ungemein. Wenn man von einer Minimalauflösung von 640x480 ausgeht, heißt das, daß keine Grafik breiter als 600 Pixel sein darf.

HTML-Editoren
Sollten Sie mit WYSIWYG-Editoren (What you see is what you get) arbeiten, seien Sie gewarnt: Nicht alles was gut aussieht ist auch gut programmiert! Editoren bergen oft folgende Fallen:
· Meta-Befehle mit dem Programmnamen, der Versionsnummer, usw. werden in den <head> Bereich geschrieben. Das wirkt unprofessionell. Löschen!
· Jede Menge an doppelten bzw. unnötigen Befehlen (v.a. beim Erstellen von Tabellen) blähen das Dateivolumen auf. Das verlängert die Ladezeiten und erregt Unmut beim Besucher. Um die überflüssigen Befehle zu erkennen sollten Sie jedoch halbwegs sattelfest in HTML sein.
· Teilweise verwenden Editoren bestimmte (interne) Formatierungsbefehle. Eine gut lesbare Datei wird unter Umständen beim Laden mit einem anderen Editor fast unlesbar (z.B. werden alle Befehle in eine einzige Zeile geschrieben.

Allgemeine Tips & Tricks
· Feedback leicht gemacht: Definieren Sie einfach einen Link zu ihrer Email-Adresse und ersetzen Sie das http:// durch mailto:. Anklicken öffnet ein Mailfenster in dem ihre Adresse schon eingegeben ist. Auch das Subject Feld können Sie schon vordefinieren:
<a href="mailto:ihrName@ihrProvider?Subject=Feedback">Mail senden
· Hintergrundbilder: Schöne Effekte, die kaum Speicher brauchen kann man durch die Farbverlaufsfunktion in den gängigsten Grafikprogrammen erreichen. Erstellen Sie dazu eine Grafik, die nur einen Pixel hoch ist aber sehr breit. Füllen Sie diese mit dem gewünschten Farbverlauf.

Normalerweise werden die Hintergrundbilder aneinander gereiht. Durch die größere Breite (Minimum 600 Pixel) wird die nachfolgende Grafik in die nächste Zeile verschoben usw. Eingebunden wird die Grafik im Body-Befehl:
<body background="hinten.jpg">
· Auch bei Tabellen können Sie Grafiken als Hintergrund verwenden: <table background="hinten.jpg">
Aber Achtung: Tabellen werden erst dann vom Browser angezeigt, wenn die Inhalte komplett geladen wurden. Zu große Dateien (mehrere Bilder in einer Tabelle) können mitunter zu minutenlangen Wartezeiten führen, in denen der User gar nichts sieht!
· Ein Anfängerfehler den Sie vermeiden sollten: Wenn auf ihrer Startseite nur ein anklickbares Logo zu sehen ist, so kennzeichnen Sie dieses als Link. Ein kleines 'Klicken Sie hier' wirkt Wunder!
· Und zuletzt noch eine Binsenweisheit, die aber viel zu oft vergessen wird: Keep it Short and Simple (KISS). Wie einige Untersuchungen gezeigt haben, wird der User auf vielen Seiten schlicht überfordert. Ausufernde Effekte, schlechte Navigation, nicht gekennzeichnete Links o.ä. verderben die sonst vielleicht sehr gute Präsentation. Weniger ist mehr, konzentrieren Sie sich auf das Wesentliche.

Zum Abschluß noch einige nützliche Links:
http://www.privatseite.com/htmlkurs.html (Eine kurzer Anfänger - Kurs in HTML)
http://www.karzauninkat.com/Goldhtml/goldhtml.htm (Ironie: die goldenen Regeln für schlechtes HTML)
http://www.netzwelt.com/selfhtml/ (SelfHTML- Referenz von Stefan Münz)


Zurück zur Übersicht