Tastaturkürzel
Shortcuts und Programmtipps

Lotus-Software

Microsoft-Software

OpenOffice

Andere


Infos


DFÜ


Befehlszeilenparameter
und Programmtipps


Hardware


Fristenlisten


Obligatorisches


Downloads


 

 

HTML-Tipps

Inhalt

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

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>

 

Mögliche Cursorformen:
auto crosshair pointer n-resize ne-resize e-resize se-resize
das System bestimmt den Cursor, in der Regel also der Standard-Cursor  Fadenkreuz Hand, Linksymbol Pfeil mit Spitze nach oben Pfeil mit Spitze nach oben recht Pfeil mit Spitze nach rechts Pfeil mit Spitze nach rechts unten
s-resize sw-resize w-resize nw-resize text wait help
Pfeil mit Spitze nach unten Pfeil mit Spitze nach links unten Pfeil mit Spitze nach links Pfeil mit Spitze nach links oben Textsymbol Wartesymbol, Sanduhr Fragezeichen

 

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.

ffffff ffffcc ffff99 ffff66 ffff33 ffff00
ffccff ffcccc ffcc99 ffcc66 ffcc33 ffcc00
ff99ff ff99cc ff9999 ff9966 ff9933 ff9900
ff66ff ff66cc ff6699 ff6666 ff6633 ff6600
ff33ff ff33cc ff3399 ff3366 ff3333 ff3300
ff00ff ff00cc ff0099 ff0066 ff0033 ff0000
ccffff ccffcc ccff99 ccff66 ccff33 ccff00
ccccff cccccc cccc99 cccc66 cccc33 cccc00
cc99ff cc99cc cc9999 cc9966 cc9933 cc9900
cc66ff cc66cc cc6699 cc6666 cc6633 cc6600
cc33ff cc33cc cc3399 cc3366 cc3333 cc3300
cc00ff cc00cc cc0099 cc0066 cc0033 cc0000
99ffff 99ffcc 99ff99 99ff66 99ff33 99ff00
99ccff 99cccc 99cc99 99cc66 99cc33 99cc00
9999ff 9999cc 999999 999966 999933 999900
9966ff 9966cc 996699 996666 996633 996600
9933ff 9933cc 993399 993366 993333 993300
9900ff 9900cc 990099 990066 990033 990000
66ffff 66ffcc 66ff99 66ff66 66ff33 66ff00
66ccff 66cccc 66cc99 66cc66 66cc33 66cc00
6699ff 6699cc 669999 669966 669933 669900
6666ff 6666cc 666699 666666 666633 666600
6633ff 6633cc 663399 663366 663333 663300
6600ff 6600cc 660099 660066 660033 660000
33ffff 33ffcc 33ff99 33ff66 33ff33 33ff00
33ccff 33cccc 33cc99 33cc66 33cc33 33cc00
3399ff 3399cc 339999 339966 339933 339900
3366ff 3366cc 336699 336666 336633 336600
3333ff 3333cc 333399 333366 333333 333300
3300ff 3300cc 330099 330066 330033 330000
00ffff 00ffcc 00ff99 00ff66 00ff33 00ff00
00ccff 00cccc 00cc99 00cc66 00cc33 00cc00
0099ff 0099cc 009999 009966 009933 009900
0066ff 0066cc 006699 006666 006633 006600
0033ff 0033cc 003399 003366 003333 003300
0000ff 0000cc 000099 000066 000033 000000

VGA-Farbpalette mit Farbnamen

000000
black
808080
gray
800000
maroon
FF0000
red
008000
green
00FF00
lime
808000
olive
FFFF00
yellow
000080
navy
0000FF
blue
800080
purple
FF00FF
fuchsia
008080
teal
00FFFF
aqua
C0C0C0
silver
FFFFFF
white

Links zum Thema


verwendete Abkürzungen

| [17. Juli 2008]