HTML-Tipps

Farbcode für Bildlaufleisten

Die Bildlaufleisten können nach Belieben farbig angepasst werden, was inzwischen auch groß in Mode gekommen ist. Opera unterstützt diese Style-Informationen erst ab Version 7. Es werden in der CSS-Datei oder den Style-Informationen im Header folgende Scrollbar-Daten eingetragen:

body
{
scrollbar-base-color:#FFFFFF;
scrollbar-3dlight-color:#FFFFFF;
scrollbar-arrow-color:#FFFFFF;
scrollbar-darkshadow-color:#222222;
scrollbar-face-color:#d4d4d4;
scrollbar-highlight-color:#FFFFFF;
scrollbar-shadow-color:#d4d4d4;
scrollbar-track-color:#FFFFFF;
}

3dlight-color 1)

arrow-color

darkshadow-color 1)

face-color

highlight-color 1)

shadows-color 1)

track-color

1) Unterschiede von 3dlight-color und highlight-color, sowie darkshadow-color und shadow-color im Detail

Größenangaben für Schriften

Schriftgrößen in Hypertext-Dokumenten sollte man immer in Pixel angeben, da Apple-Rechner und PCs Angaben in Punkt unterschiedlich darstellen. Apple Displays arbeiten mit einer Auflösung von 72 ppi, PC-Displays mit 92 ppi. Schriften mit einer Größenangabe in Punkt werden unter Windows deswegen um ein Drittel größer ausgegeben: eine Schrift mit der Größe 16 Punkt wird auf einem Apple mit einer Höhe von 16 Pixeln, auf einem PC mit 21 Pixeln angezeigt. Mit der Größenangabe font-size: 16px würde also eine Schrift auf Windows- wie auch auf Apple-Rechner mit einer Höhe von 16 Pixeln angezeigt werden, bei der Angabe font-size: 16pt würde die Schrift mit einem Windows-Browser 21 Pixel hoch, bei einem Apple-Recher aber 16 Pixel hoch dargestellt werden. Die exakte Definition der Größe Punkt ist 1/72 Zoll.
Neben den Angabe der Schriftgröße in Pixel und Punkt, können die Angaben außerdem erfolgen in

• pc… Pica, eine typografische Einheit, die 12 Punkt entspricht
• in… Inch ist selbsterklärend, wie auch
• cm… Zentimeter und
• mm… Millimeter
• em… eine relative Größe, die sich auf die Breite des Großbuchstabens M der jeweiligen Schriftart bezieht
• ex… ebenfalls eine relative Größe, bezogen auf die Höhe des Kleinbuchstabens x
• %… Angaben können auch relativ auf die Schriftarten bezogen sein

Angaben für Schriftenfamilien

Da auf  verschiedenen Rechnern immer  unterschiedliche Schriften installiert sein werden, ist es sinnvoll dieses auch in den Definitionen für die verwendeten Schriftarten zu berücksichtigen. Auf Windows-, Linux- und Apple-Betriebssystemen werden außerdem verschiedene Standardschriftarten benutzt. Der Font-Tag kann mehrere Schriftarten enthalten, die durch Kommata getrennt werden, z. B.  <font face=Schriftart 1, Schriftart 2, Schriftart 3>. Einfacher ist jedoch die einmalige Definition in einer CSS-Datei oder die Verwendung von Style-Informationen als Vorlagen im Head der HTML-Datei. Dort werden die unterschiedlichen Schriftarten für die jeweiligen Elemente in der Angabe font-familiy definiert, z. B. body { font-family: Arial, Verdana, Helvetica, Geneva, Sans Serif }. Für die Schriften-Familie der serifenlosen Schriften ist vor allem Arial sinnvoll, da diese Schriftart normalerweise auf allen Systemen installiert ist. Die angegebenen Schriftarten werden von Browser in der angegebenen Reihenfolge überprüft, wenn also in diesem Beispiel Arial nicht installiert ist wird Verdana benutzt, wenn Verdana nicht installiert ist, Helvetica usw.. Deswegen sollte als letzter Eintrag immer die generische Schriftfamilie aufgeführt werden.
Die generischen Schriftfamilien sind:

serif = Schriftart mit Serifen
sans-serif = serifenlose Schriftart
cursive = Schriftart für Schreibschrift
fantasy = Schriftart für ungewöhnliche Schrift
monospace = Schriftart mit dicktengleichen Zeichen

Das Box-Modell

Jede Box wird in der Größe definiert mit Inhalt, Polster (padding), Rahmen (border) und Rand (margin).

Die Gesamtbreite ergibt sich aus width + padding + border + margin. Die Höhe der Box ergibt sich aus deren Inhalt. Dem Browser sollte mit einem Standardeintrag mitgeteilt werden, dass die Seiten sich an vorgeschriebene Standards halten. Nur dann interpretieren die aktuellen Versionen von Opera, Firefox/Mozilla und Internet Explorer dieses Modell richtig. Die Internet Explorer der 5. Generation nehmen als width die Breite von width + padding + border. Dadurch werden die Boxen zu klein dargestellt. Das gleiche gilt für Opera und Internet Explorer 6, wenn eine Angabe wie <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> im Kopf des Dokuments fehlt. Sie verwenden dann den so genannten Quirks-Modus.

SmartTags verhindern

Mit dieser Meta-Angabe im Head einer HTML-Datei lassen sich SmartTags verhindern.
<meta name="MSSmartTagsPreventParsing" content="TRUE">

Hilfetexte und Tooltipps

Im A-Tag und IMG-Tag kann man mit title="text" Informationen zum Link angeben oder eine Seite sehbehindertengerecht gestalten. Eine Zeilenumbruch erhält man mit der Zeichenfolge &#10;.  Beispiel.

Die Unterschiede von ALT, LONGDESC und TITLE

Alt, <img src="bild.gif" alt="Beschreibender Text" />

Der Alt-Tag muss laut HTML-Standard zu jedem Bild bestehen. Eine leere Alt-Beschreibung verwendet man, wenn das Bild nur dem Layout dient. Screenreader für Sehbehinderte ignorieren dann das Bild

Longdesc, <img src="bild.gif" alt="Beschreibender Text" longdesc="Erweiterte-Beschreibung.html" />

Mit der Longdescription kann man auf zusätzliche Informationen zu Bildern, die in den Alt-Tag nicht hineinpassen oder als weiterführende Informationen auf der aktuellen Seite stören, hinweisen. Longdescription  verweist auf eine HTML-Seite, auf die im Rahmen von Barrierefreiem Web-Design Screenreader zugreifen können.

Title, <img src="bild.gif" alt="Beschreibender Text" title="Weitere Infos" />

Das Title-Tag ist ein Platzhalter für ein Bild und soll diese beschreiben, wenn zum Beispiel keine Bilder vom Browser angezeigt werden können oder sollen, wie bei einem Screenreader. Die Bildinhalte sollen auf diese Weise beschrieben werden. Der Title-Tag funktioniert bei Bildern und Verlinkungen. 

Scrollbalken verhindern

Scrollbalken lassen sich mit Hilfe der CSS-Eigenschaft overflow entfernen. Die Blockelemente wie body, div und textarea lassen sich entsprechend formatieren.
Im allgemeinen  genügt die Definition

<style type="text/css">
body, textarea
{
overflow: auto;
}
</style>

Es erscheint der Scrollbalken nur dann, wenn das Element, also die Seite oder der Textblock, tatsächlich größer ist, als der vorgegebene Bereich. Der CSS-Eigenschaft direction ermöglicht die Anordnung des Scrollbalkens links, ltr, left to right, oder rechts, rtl, right to left, vorzugeben. Diese Eigenschaft funktioniert nur mit dem Internet Explorer.

Mauszeiger verändern

Der Mauszeiger lässt sich auch anders definieren als die vorgegebne Hand. Ein Fragezeichen ist vermutlich das nützlichste Symbol, wenn man mit einem Link Hilfe anbieten möchte. Ein Fragezeichen erhält man mit diesem Beispiel:

<a href="#" style="cursor:help">Text</a>

In diesem Beispiel wird der Mauszeiger zum Fadenkreuz:

<div style="cursor:crosshair"> Text</div>

HTML-Quellcode als Java-Script

Man kann den Quellcode eines HTML-Dokuments auch als Java-Script schreiben. Dadurch ist der Quelltext nicht direkt editierbar, was in den wenigsten Fällen aber wirklich interessant sein könnte. Aber man kann so zum Beispiel E-Mail-Adressen verschleiern, damit automatische E-Mail-Harvester diese nicht erkennen. Informationen zu der Verschleierung von HTML-Inhalten mit Hilfe von Java-Script finden sich hier: Eine weitere Anwendung ist der Schutz vor den Robotern der Suchdienste, da diese den Inhalt nicht indizieren können.

Verhindern von Hurenkindern und Schusterjungen

Schusterjunge oder Waisenkind, englisch widow, ist ein Fachbegriff der Schriftsetzer und bezeichnet eine einzelne Zeile am Ende einer Seite oder einer Spalte.
Als Hurenkind oder auch Hurensohn, im Englischen orphan, bezeichnet man eine einzelne Zeile zu Beginn einer Seite oder Spalte.
HTML bietet die Möglichkeit beim Druck von Webseiten auch diese Fehler des Druckes zu unterbinden. Dazu dienen die CSS-Eigenschaften widows und orphans. Der zugehörige Wert gibt als ganze Zahl die Zeilen an, die am Ende oder Anfang einer Seite mindesten stehen müssen, zum Beispiel: { widows:3; orphans:3 }.

Schnellwahltasten für Links

Zum schnellen Navigieren durch HTML-Seiten gibt es das Attribut accesskey. Man kann einem Link eine Schnellwahltaste zuweisen, die mit der ALT-Taste zusammen ausgerufen wird. In den Area42-Seiten sind das ALT+1 für www.Siems.org, ALT+2 für area42.siems.org und ALT+3 für die HowTo-Seiten. Das Attribut wird im a-Tag eingesetzt und kann ein Buchstabe oder eine Ziffer sein: <a href="http://www.Siems.org" accesskey="1" title="www.Siems.org">Siems.org</a>.
Wie die Access Keys bei den unterschiedlichen Browsern benutzt werden, beschreibe ich auf der Browser-Seite.

Übersicht über die websicheren Farben

Als websichere Farben bezeichnet man diejenigen Farben, die auch mit einer schäbigen 256-Farben-Darstellung angezeigt werden können. In der hexadezimalen Darstellung der Farben sind für den jeweiligen Anteil rot, grün und blau nur die Farbwerte 00, 33, 66, 99, cc und ff erlaubt. Daraus ergeben sich 6³, also 216 Farben.
Weiter Informationen bietet die Seite Metacolor, die Tipps für den richtigen Umgang mit Farben und der Farbwahl bei Internet-Auftritten gibt. Der Link findet sich unter Links zum Thema auf dieser Seite.

Links zum Thema

• SelfHTML
• SelfPHP
• Metacolor
  Tutorial: Farben im Webdesign
• Nvu Composer
  HTML-Editor mit ähnlichem Aufbau wie Frontpage, aber Freeware