Cascading Stylesheets Stil mit <Stil>
Cascading Stylesheets Stil mit <Stil> Die Gruppe der HTML-Kernattribute, die "Ereignishandler" darstellen, zielen in der Hauptsache auf den Gebrauch in Formularen ab – dem Herzen des E-Commerce. Sie können aber auch für die Animation von HTML-Elementen und die Ausführung von Skripten wie JavaScript benutzt werden.
In einem HTML-Tag können durchaus mehrere Ereignisse gleichzeitig abgefangen werden – ein klassischer Rollover-Effekt, wie er ansonsten mit einem Bild und JavaScript realisiert wird, kann durch die Ereignishandler auf vielerlei HTML-Elemente angewendet werden:
<tr onmouseover="this.bgColor='khaki'"
onmousedown="this.bgColor='teal'"
onmouseout="this.bgColor='tomato'">
erzeugt einen Rollover-Effekt auf einer Tabellenzelle.
Das Attribut id dient dazu, ein HTML-Element im Dokument eindeutig zu identifizieren.
Das Attribut title transferiert Informationen.
Die beiden Attribute class und style sind für die Definition von Stylesheets gedacht – sie liefern neue "Eigenschaften" bei einem Tag ab.
Die Attribute lang und dir definieren Sprache und Laufrichtung.
class="name" • dir="direction" • id="name" • lang="languagecode" • onclick="action" • ondblclick="action" • onkeydown="action" • onkeypress="action" • onkeyup="action" • onmousedown="action" • onmousemove="action" • onmouseout="action" • onmouseover="action" • onmouseup="action" • style="stylecode" • title="Zeichenkette"
Das Kernattribut class dient dem Transport von Stylesheet-Eigenschaften zu einem Tag und weist dem Tag den Namen eines Klassenselektors zu.
style schreibt CSS-Eigenschaften direkt in das öffnende HTML-Tag eines HTML-Elements.
Die Texte in dieser Referenz sind schwarz. Um den Text in einem Absatz dieses Dokuments rot darzustellen, wird im head-Element dieses Dokuments eine Klasse .rot definiert. Ein Absatz, dessen <p>-Tag das Attribut class="rot" enthält, wird im Browser rot gerendert.
<head>
<style type="text/css">
<!--
.rot { color: #990000}
-->
</style>
</head>
...
<p class="rot">
Der HTML-Code in diesem Beispiel ist rot.
</p>
Der HTML-Code in diesem Beispiel ist rot.
Das Kernattribut dir gibt die Richtung des Textes an. Die Laufrichtungen links nach rechts und rechts nach links erlauben die Internationalisierung von HTML.
Dazu passt das Kernattribut lang, das die verwendete Sprache definiert. Die Angabe der Sprache durch das Attribut lang reicht aber alleine nicht aus, um auch die Richtung des Textflusses zu steuern.
Wenn das dir-Attribut im <html>-Tag der Site angegeben wird, wird es auf das gesamte Dokument angewandt. Wird es in anderen Tags verwendet, wirkt es sich ausschließlich auf die Texte innerhalb des Wirkungskreises des jeweiligen Tags aus. Wenn es z.B. in einem <table>-Tag eingesetzt wird, wird die erste Spalte der Tabelle auf der rechten Seite liegen und weitere Spalten werden sich zur linken Seite hin anschließen.
Das Attribut sollte nicht benutzt werden, um einfach nur eine Zeichenfolge umzukehren. Das kann besser mit einem Skript geschehen.
Die folgenden Werte können verwendet werden:
dir="ltr" Der Wert ltr ist die Vorgabe und stellt den Textfluss von links nach rechts dar.
dir="rtl" Der Wert rtl weist den Browser an, den Textfluss von rechts nach links wiederzugeben.
Beachten Sie bitte, dass ein HTML-Text in fremden Sprachen, der Sonderzeichen enthält, nicht als ANSI-Datei, sondern als Unicode-Datei gespeichert werden soll, damit die Zeichen auch korrekt dargestellt werden können. Dennoch sollten Sie darauf vorbereitet sein, dass nicht alle Browser in der Lage sind, Unicode korrekt darzustellen.
<html dir="rtl" lang="he">
<body>
hier wird ein Text eingesetzt,
der von rechts nach links läuft
</body>
</html>
Funktioniert nicht in Internet Explorer 5 (Mac), Netscape 4
Das Kernattribut id weist einem Tag einen Namen, auch "Identifier" genannt, zu. Die Bezeichnung muss im Dokument eindeutig sein und kann nicht weiter verwendet werden. Da die Bezeichnung eindeutig ist, kann der Name das Ziel einer URL darstellen, eine Stylesheetregel sein oder der Animation eines Elements durch ein JavaScript dienen.
Die Benutzung des Attributs id beeinflusst die Ausgabe in keiner Weise.
<input type="checkbox" id="ckbx1"> <input type="checkbox" id="ckbx2">
Das Kernattribut lang definiert die Basissprache, in der Text und Zeichen einer Webseite dargestellt werden. Das erlaubt die Internationalisierung einer HTML-Seite für eine große Zahl von Sprachen.
Sprachen werden durch einen Code aus zwei Buchstaben zugewiesen, z.B. "en" für Englisch und "el" für Griechisch. Ein oder mehrere Werte können durch einen Bindestrich angehängt werden, um eine regionale oder ethnische Ausprägung der Sprache zu deklarieren, z.B. "en-us" für US-Englisch.
Beachten Sie bitte, dass HTML-Text, der fremde Sprachen enthält, nicht als ANSI, sondern als Unicode gespeichert werden sollte, damit alle Zeichen der Sprache korrekt dargestellt werden können. Sie sollten aber darauf vorbereitet sein, dass nicht alle Browser in der Lage sind, Unicode korrekt darzustellen.
<span lang="el"> hier wird ein Text in einer fremden Sprache eingesetzt </span>
Das Kernattribut onclick ist ein Ereignishandler, der auf den einfachen Klick mit der Maus auf ein ausgewähltes HTML-Element reagiert. Elemente können z.B. Tabellenzeilen oder Zellen sein, ein Textabsatz oder ein definierter Bereich innerhalb des Dokuments, der durch ein <div>-Tag angegeben wird. Mit jedem einfachen Klick auf das HTML-Element wird ein Skriptcode ausgeführt. Der Skriptcode kann auch Funktionen und Subroutinen aufrufen, die jedes Mal ausgeführt werden, wenn ein einfacher Klick auf das Element erfasst wird.
ondblclick ist ein Ereignishandler, der auf den Doppelklick mit der Maus reagiert.
Jedes Mal, wenn die Schaltfläche geklickt wird, wird eine JavaScript-Codezeile ausgeführt, die eine kleine Nachricht auf den Bildschirm spielt (in Netscape 4.x muss das input-Element innerhalb eines <form>-Tags liegen, damit es im Browser angezeigt wird).
Die Aktion wird erst durchgeführt, wenn die Schaltfläche geklickt und die Maustaste wieder losgelassen wurde.
<input type="button"
onclick="JavaScript:
alert( 'onclick-Ereignis' )"
value="Klicken Sie diese Schaltfläche">
Bei einem Klick auf eine Tabellenzelle wird die Zelle in einer anderen Farbe angezeigt. Hier wird einem Objekt des Document Object Model (DOM) ein neuer Wert zugewiesen.
Der Ereignishandler funktioniert nicht in Netscape 4 und Opera 5 (Mac).
Das Kernattribut ondblclick ist ein Ereignishandler, der mit dem Doppelklick auf ein HTML-Element verbunden ist. Sobald ein Doppelklick auf ein Element abgefangen wird, wird ein Skriptcode ausgeführt. Der Skriptcode kann auch Funktionen und Subroutinen aufrufen, die jedes Mal ausgeführt werden, wenn ein Doppelklick auf das Element erfasst wird.
Die Aktion wird erst durchgeführt, wenn die Schaltfläche doppelt geklickt und die Maustaste wieder losgelassen wurde.
Das ähnliche Kernattribut onclick ist ein Ereignishandler, der auf einen einfachen Klick mit der Maus reagiert.
Jedes Mal, wenn doppelt auf die Schaltfläche geklickt wird, wird ein JavaScript ausgeführt, das eine Nachrichtenbox auf dem Bildschirm einspielt.
<input type="button"
ondblclick="JavaScript:
alert( 'ondblclick entdeckt' )"
value="Doppelklick mich!">
Funktioniert nicht in Opera 5 (Mac) und Netscape 4 (Mac)
Bei einem Doppelklick auf eine Tabellenzelle wird die Zelle in einer anderen Farbe angezeigt. Hier wird kein Skript aufgerufen, sondern einem Objekt des Document Object Model ein neuer Wert zugewiesen. Der Ereignishandler funktioniert nicht in Netscape 4 und Opera 5 (Mac).
Das Kernattribut onkeydown ist ein Ereignishandler. Das Attribut erkennt, dass eine Taste der Tastatur heruntergedrückt wird, während sich die Maus innerhalb des markierten HTML-Elements befindet, d.h., während das HTML-Element im Fokus liegt. Jedes Mal, wenn eine Taste gedrückt wird, wird ein Skriptcode durch onkeydown initiiert. Das Skript kann Funktionen und Subroutinen aufrufen, die beim Eintreten des Ereignisses ausgeführt werden sollen.
Sollen z.B. nur Zahlen in ein Feld eingegeben werden, kann bei jedem eingegebenen Zeichen der Wert des Zeichens ausgelesen werden und eine entsprechende Aktion gestartet werden, wenn ein nichtnumerischer Wert eingegeben wurde.
Das ähnliche Kernattribut onkeyup ist ein Ereignishandler, der erkennt, das eine Taste losgelassen wurde. Das Kernattribut onkeypress ist ein Ereignishandler, der erkennt, dass eine Taste auf der Tastatur heruntergedrückt wird.
Positionieren Sie die Maus innerhalb des Eingabefeldes und tippen Sie ein Wort ein. Jedes Mal, wenn eine Taste gedrückt wird, wird eine Zeile JavaScript ausgeführt, die eine Nachricht auf dem Bildschirm ausgibt. Beachten Sie, dass die Nachricht erscheint, bevor der Buchstabe im Eingabefeld angezeigt wird.
<textarea onkeydown="javascript:
alert('Eine Taste wurde heruntergedrückt')">
</textarea>
Funktioniert nicht in Opera 5 (Mac), Mozillla 1 (Mac)
Das Kernattribut onkeypress ist ein Ereignishandler, der erkennt, dass eine Taste auf der Tastur gedrückt wird, während sich die Maus innerhalb eines ausgewählten HTML-Elements befindet, also während das HTML-Element im Fokus liegt.
Jedes Mal, wenn die Taste gedrückt wird, wird der Skriptcode des Ereignishandlers onkeypress ausgeführt. Das Skript kann Funktionen und Subroutinen aufrufen, die beim Eintreten des Ereignisses ausgeführt werden sollen.
Wenn z.B. eine numerische Eingabe gefordert wird, z.B. eine Telefonnummer, kann das Skript bei jedem Zeichen prüfen, ob das eingegebene Zeichen mit einer numerischen Taste eingegeben wurde, und einen Hinweis ausgeben, wenn eine andere Taste gedrückt wurde.
onkeydown ist ein Ereignishandler, der das Herunterdrücken einer Taste erkennt.
onkeyup ist ein Ereignishandler, der erkennt, dass eine Taste losgelassen wurde.
Platzieren Sie die Maus innerhalb des Eingabefeldes und tippen Sie ein Wort. Bei jedem Drücken einer Taste wird eine JavaScript-Codezeile ausgeführt, die eine Nachricht auf dem Bildschirm ausgibt.
Beachten Sie, dass das Zeichen nicht im Eingabefeld erscheint, bevor "OK" im Nachrichtenfenster geklickt wurde.
<textarea onkeypress="javascript:
alert('Eine Taste wurde gedrückt und losgelassen')">
</textarea>
Funktioniert nicht in Opera 5 (Mac)
Das Kernattribut onkeyup ist ein Ereignishandler, der erkennt, dass eine Taste auf der Tastatur gedrückt und wieder losgelassen wurde, während das HTML-Element im Fokus war. Sobald die Taste losgelassen wurde, wird ein Skriptcode ausgeführt. Das Skript kann Funktionen und Subroutinen aufrufen, die jedes Mal ausgeführt werden sollen, wenn das Ereignis eintritt.
Wenn Sie z.B. für die Eingabe einer Telefonnummer nur numerische Werte zulassen wollen, prüft ein Skript bei jedem Ereignis onkeyup den Wert der Eingabe und meldet einen Eingabefehler, wenn andere als numerische Zeichen eingegeben wurden.
onkeydown ist ein Ereignishandler, der erkennt, dass eine Taste auf der Tastatur gedrückt wird. onkeypress ist ein Ereignishandler, der erkennt, dass eine Taste auf der Tastatur gedrückt wird.
Positionieren Sie die Maus innerhalb des Eingabefeldes und geben Sie ein Wort ein. Jedes Mal, wenn Sie die Taste loslassen, wird eine Zeile JavaScript ausgeführt, die eine Nachricht auf dem Bildschirm einspielt. Beachten Sie, dass die Nachricht erst erscheint, wenn das Zeichen im Eingabefeld sichtbar geworden ist.
<textarea onkeyup="javascript:
alert('Eine Taste wurde losgelassen')">
</textarea>
Funktioniert nicht in Opera 5 (Mac)
Das Kernattribut onmousedown ist ein Ereignishandler, der das Herunterdrücken der Maustaste erkennt, während sich die Maus innerhalb des HTML-Elements befindet, also während das HTML-Element im Fokus ist. Jedes Mal, wenn die Maustaste gedrückt wird, wird ein Skriptcode ausgeführt. Das Skript kann Funktionen und Subroutinen aufrufen, die bei jedem Eintreten des Ereignisses ausgeführt werden.
onmousemove, onmouseout, onmouseover und onmouseup.
Positionieren Sie die Maus über der Schaltfläche und drücken Sie die Maustaste herunter. Bei jedem Klick wird eine Zeile JavaScript ausgeführt, die eine Nachricht auf dem Bildschirm einspielt. Lassen Sie die Maustaste los und klicken Sie "OK" im Nachrichtenfenster.
<input type="button" onmousedown="JavaScript:
alert( 'onmousedown entdeckt' )"
value="Mit der Maus herunterklicken!">
Funktioniert nicht in Opera 5 (Mac)
Das Kernattribut onmousemove ist ein Ereignishandler, der die Bewegung der Maus innerhalb eines ausgewählten HTML-Elements erkennt – mit anderen Worten, während das Element im Fokus ist. Bei jeder Bewegung der Maus innerhalb des Elements wird der Skriptcode von onmousemove ausgeführt. Das Skript kann auch Funktionen und Subroutinen aufrufen, die bei diesem Ereignis ausgeführt werden.
onmousedown, onmouseout, onmouseover und onmouseup.
Bewegen Sie die Maus über der Schaltfläche.
<input type="button"
onmousemove="JavaScript:
alert( 'onmousemove entdeckt' )"
value="Bewegen Sie die Maus
in die Schaltfläche!">
Funktioniert nicht in Netscape 4 (Mac)
Das Kernattribut onmouseout ist ein Ereignishandler, der die Bewegung der Maus aus einem ausgewählten HTML-Element heraus erkennt – mit anderen Worten, während das Element im Fokus war. Jedes Mal, wenn die Maus aus dem Element herausbewegt wird, wird der Skriptcode von onmouseout ausgeführt. Das Skript kann auch Funktionen und Subroutinen aufrufen, die bei diesem Ereignis ausgeführt werden.
onmousedown, onmousemove, onmouseover und onmouseup.
Positionieren Sie die Maus innerhalb der Schaltfläche und bewegen Sie die Maus dann aus der Schaltfläche heraus. Sobald die Maus die Schaltfläche verlässt, erscheint eine Mitteilung auf dem Bildschirm.
<input type="button"
onmouseout="JavaScript:
alert( 'onmouseout entdeckt' )"
value="Bewegen Sie die Maus
aus der Schaltfläche heraus!">
Funktioniert nicht in Netscape 4 (Mac)
Bewegen Sie die Maus über die Zeilen der Tabelle. Sie ändern die Farbe, sobald der Mauszeiger über einer Zeile steht, ändern die Farbe wieder, wenn der Mauszeiger aus der Zeile herausbewegt wird, und ändern die Farbe zum dritten Mal, wenn die Maustaste auf einer Zeile heruntergedrückt wird.
Das Kernattribut onmouseover ist ein Ereignishandler, der die Bewegung der Maus auf ein ausgewähltes HTML-Element erkennt – mit anderen Worten, während das Element im Fokus ist. Jedes Mal, wenn die Maus auf das Element bewegt wird, wird der Skriptcode von onmouseover ausgeführt. Das Skript kann auch Funktionen und Subroutinen aufrufen, die bei diesem Ereignis ausgeführt werden.
onmousedown, onmousemove, onmouseout und onmouseup.
Bewegen Sie die Maus über die Schaltfläche. Sobald die Maus über der Schaltfläche ankommt, wird eine Nachricht eingespielt.
<input type="button"
onmouseover="JavaScript:
alert( 'onmouseover entdeckt' )"
value="Bewegen Sie die Maus
auf die Schaltfläche!">
Funktioniert nicht in Netscape 4 (Mac)
Wenn die Maus über eine Zelle der Tabelle bewegt wird, wird die Zelle farbig hinterlegt. Die Zellen bleiben farbig, auch wenn die Maus die Zelle verlässt.
<td onmouseover="this.bgColor='khaki'">zelle1</td>
Die Tabellenzellen werden farbig hinterlegt, wenn der Mauszeiger das erste Mal auf eine Zelle kommt.
| zelle1 | zelle1 | zelle1 | zelle1 | zelle1 |
| zelle1 | zelle1 | zelle1 | zelle1 | zelle1 |
| zelle1 | zelle1 | zelle1 | zelle1 | zelle1 |
Das Kernattribut onmouseup ist ein Ereignishandler, der erkennt, dass die Maustaste innerhalb eines ausgewählten HTML-Elements losgelassen wurde – mit anderen Worten, während das HTML-Element im Fokus war. Jedes Mal, wenn die Maustaste losgelassen wird, wird der Skriptcode von onmouseup ausgeführt. Das Skript kann auch Funktionen und Subroutinen aufrufen, die bei diesem Ereignis ausgeführt werden.
onmousedown, onmousemove, onmouseover und onmouseout.
Positionieren Sie die Maus über der Schaltfläche, drücken Sie die Maustaste und lassen Sie die Maustaste wieder los. Sobald Sie die Maustaste loslassen, erscheint ein Nachrichtenfenster auf dem Bildschirm.
<input type="button"
onmouseup="JavaScript: alert('onmouseup entdeckt')"
value="Klicken und auf
der Schaltfläche loslassen!">
Das Kernattribut style erzeugt so genannte "Inlinestile" innerhalb eines HTML-Tags, mit denen die Darstellung des HTML-Elements geändert wird. Dies ist eine häufig benutzte Methode, mit der z.B. Macromedia Dreamweaver und Adobe GoLive Elemente wie Ebenen und Rahmen innerhalb eines HTML-Dokuments positionieren (die Positionsangaben werden durch das style-Attribut direkt in das <div>-Tag geschrieben).
Verwechseln Sie das Attribut style nicht mit dem <style>-Tag, das im head-Element des HTML-Dokuments benutzt wird, um einem HTML-Dokument globale Stile zuzuweisen oder eine Stylesheetdatei zu importieren.
Ein HTML-Element wird durch ein style-Attribut positioniert:
<div id="Layer1" style="position:absolute;
left:20px; top:20px;
width:300px; height:200px;
z-index:1;
background-color:teal;">
</div>
Beispiel in separatem Fenster öffnen
<p style="color:teal;
background-color: mintcream;">
Dieser Text ist blaugrün
und hat einen hellblauen Hintergrund.
</p>
Dieser Text ist blaugrün und hat einen hellblauen Hintergrund.
Das Kernattribut title weist einem Tag eine Zeichenkette zu. Innerhalb der Zeichenkette können Sie HTML-Zeichen benutzen. z.B. erzeugen einen Textumbruch bei der Darstellung.
Der Wert von title kann auch in anderen HTML-Attributen benutzt werden. Im Gegensatz dazu kann der Wert für das Attribut id nur ein einziges Mal im Dokument verwendet werden.
Verwechseln Sie das title-Attribut nicht mit dem <title>-Tag, das dem HTML-Element einen Titel zuweist.
Das title-Attribut wird von den ToolTips im Internet Explorer benutzt, um ein kleines Fenster mit einem Hilfetext anzuzeigen, wenn der Mauszeiger über dem HTML-Element liegt.
Ähnlich funktioniert das title-Attribut in den Tags <abbr> und <acronym>, die eine Abkürzung oder ein Acronym in einem kleinen Hilfefenster erklären. Platzieren Sie den Mauszeiger über dem farbig hinterlegten Text. Nach kurzer Zeit erscheint für rund 10 Sekunden ein kleines Fenster mit einer Erklärung.
<p>Tipp: Benutzen Sie das <abbr title="eng: abbreviation
bedeutet Abkürzung"
style="background-color:darkkhaki;">
<abbr>-Tag</abbr>,
um eine Abkürzung zu erklären. </p>
Tipp: Benutzen Sie das <abbr>-Tag, um eine Abkürzung zu erklären.
Funktioniert nicht in Netscape 4 (Mac)
Wird in Opera 5 (Mac) in der Statuszeile des Browsers angezeigt.