Webdesign mit CSS, HTML und Javascript
Stil mit {stil}
Mar 09
HTML 4 Attribute
Eine kleine Gruppe von GTML-Attributen kann in fast allen HTML-Tags verwendet werden – bei den wenigen Ausnahmen handelt es sich fast immer um die Tags im Header des HTML-Dokuments.
- id identifiziert ein HTML-Element im Dokument eindeutig.
- title transferiert zusätzliche Informationen.
- class und style sind für die Definition von Stylesheets gedacht – sie liefern generelle bzw. individuelle CSS-Eigenschaften bei einem Tag ab.
- lang und dir definieren Sprache und Laufrichtung.
Früher war es üblich, auch Javascript-Ereignisse und die dazugehörigen Aktionen wie der Aufruf einer Funktion als reguläres HTML-Attribut innerhalb von HTML-Tags zu notieren. Diese Praxis ist mit vielen Nachteilen verbunden und sollte nicht mehr verwendet werden. Anstelle der Event-Handler in HTML-Tags wird die Registrierung von Ereignissen nach dem DOM Level 2 empfohlen.
class="name"
Alle Tags außer base, basefont, head, html, meta, param, script, style, title
class transportiert CSS-Eigenschaften zu einem Tag und weist dem Tag den Namen eines Klassenselektors zu.
<head>
<style type="text/css">
.rot { color: red; }
</style>
</head>
...
<p class="rot"> Der HTML-Code in diesem Beispiel ist rot. </p>
Der HTML-Code in diesem Beispiel ist rot.
dir="direction"
Alle Tags außer applet, base, basefont, bdo, br, frame, frameset, iframe, param, script
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.
Die folgenden Werte können verwendet werden:
- dir="ltr" ltr (Vorgabe) und setzt den Textfluss von links nach rechts.
- dir="rtl" rtl Textfluss im Browser von rechts nach links.
<html dir="rtl" lang="he"> <body> hier wird ein Text eingesetzt, der von rechts nach links läuft … </body> </html>
Wenn das dir-Attribut im <html>-Tag der Site angegeben ist, wird es auf das gesamte Dokument angewandt. In allen anderen Tags wirkt es sich ausschließlich auf die Texte innerhalb des jeweiligen Tags aus. Bei Verwendung in einem <table>-Tag wird die erste Spalte der Tabelle auf der rechten Seite liegen und weitere Spalten werden sich zur linken Seite hin anschließen.
Dieser Text läuft von rechts nach links.
Das HTML-Attribut dir funktioniert nicht wie die Ausrichtung des Textes durch die CSS-Eigenschaft text-align: Der Punkt liegt auf der linken Seite vor dem Text.
id="name"
Alle Tags außer base, head, html, meta, script, style, title
id (Identifier) weist einem Tag einen Namen zu. id-Attribute werden als Ziel für CSS-Eigenschaften, interne Links innerhalb einer Seite und zur eindeutigen Identifizierung eines HTML-Elements in Javascript verwendet.
<button id="littleBox">Klick!</button>
var littleBox = document.getElementById('littleBox');
littleBox.onclick = function() {
alert('Treffer!');
}
lang="languagecode"
Alle Tags außer applet, base, basefont, br, frame, frameset, iframe, param, script
lang definiert die Basissprache für den Text und die Zeichen einer Webseite. 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.
<span lang="el"> hier wird ein Text in einer fremden Sprache eingesetzt </span>
style="CSS-Regel"
Alle Tags außer base, basefont, head, html, meta, param, script, style, title
style erzeugt CSS-Inlinestile innerhalb eines HTML-Tags, um die Darstellung des HTML-Elements zu ändern. Dies ist eine häufig benutzte Methode, um Werte der allgemeinen CSS-Datei in einem einzelnen HTML-Dokument zu überschreiben.
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 style="float: right; background: gainsboro;
border: 5px solid silver;">
</div>
title="Zeichenkette"
Alle Tags außer base, basefont, head, html, meta, param, script, style, title
Das HTML-Attribut title weist einem HTML-Tag eine Zeichenkette zu und wird vom Browser als Tooltip benutzt, um ein kleines Fenster mit einem Hilfetext anzuzeigen, wenn der Mauszeiger über dem HTML-Element liegt. Innerhalb der Zeichenkette können HTML-Zeichen benutzt werden – z.B. erzeugen einen Textumbruch bei der Darstellung. Das title-Attribut darf nicht mit dem <title>-Tag im Header der Seite verwechselt werden, der einer HTML-Seite einen Titel für die Browserleiste zuweist.
<a href="title.html" title="title-Tag einer HTML-Seite">title • Titel des Dokuments</a>
Ä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.
<abbr title="eng: Abbreviation bedeutet Abkürzung"
style="outline: 1px dotted red;">
abbr-Tag
</abbr>
Tipp: Benutzen Sie das abbr-Tag, um eine Abkürzung zu erklären.
Die Zeichenfolge ist eine – wenn auch eingeschränkte – Möglichkeit, einen Zeilenumbruch in die Ausgabe des Browsers einzubringen, funktioniert aber nicht in allen Browsern.